diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

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

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

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

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

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

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

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

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

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

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

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

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

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

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

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    mouseover

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    mouseup

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

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

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

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

    setInteractive

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

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

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

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

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

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

    tap

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

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

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    touchendoutside

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

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

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The opacity of the object.

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

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

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

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

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

    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 + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

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

    position

    + Point + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

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

    rotation

    + Number + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The rotation of the object in radians.

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

    scale

    + Point + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The scale factor of the object.

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

    stage

    + Stage + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

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

    visible

    + Boolean + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

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

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

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

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

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

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

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

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

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

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

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

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

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    mouseover

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    mouseup

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

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

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

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

    setInteractive

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

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

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

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

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

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

    tap

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

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

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    touchendoutside

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

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

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The opacity of the object.

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

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

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

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

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

    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 + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

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

    position

    + Point + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

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

    rotation

    + Number + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The rotation of the object in radians.

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

    scale

    + Point + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The scale factor of the object.

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

    stage

    + Stage + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

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

    visible

    + Boolean + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

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

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

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

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

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

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

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

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

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

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

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

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

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    mouseover

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    mouseup

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

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

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

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

    setInteractive

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

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

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

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

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

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

    tap

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

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

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    touchendoutside

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

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

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The opacity of the object.

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

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

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

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

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

    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 + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

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

    position

    + Point + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

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

    rotation

    + Number + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The rotation of the object in radians.

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

    scale

    + Point + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The scale factor of the object.

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

    stage

    + Stage + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

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

    visible

    + Boolean + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

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

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

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

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

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

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

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

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

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

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

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

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

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    mouseover

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    mouseup

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

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

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

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

    setInteractive

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

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

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

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

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

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

    tap

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

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

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    touchendoutside

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

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

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The opacity of the object.

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

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

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

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

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

    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 + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

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

    position

    + Point + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

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

    rotation

    + Number + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The rotation of the object in radians.

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

    scale

    + Point + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The scale factor of the object.

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

    stage

    + Stage + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

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

    visible

    + Boolean + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

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

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

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

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

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

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

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

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

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

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

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

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

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    mouseover

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    mouseup

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

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

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

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

    setInteractive

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

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

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

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

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

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

    tap

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

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

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    touchendoutside

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

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

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The opacity of the object.

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

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

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

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

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

    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 + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

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

    position

    + Point + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

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

    rotation

    + Number + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The rotation of the object in radians.

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

    scale

    + Point + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The scale factor of the object.

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

    stage

    + Stage + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

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

    visible

    + Boolean + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

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

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

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

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

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

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

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

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

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

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

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

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

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

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

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    mouseover

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    mouseup

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

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

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

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

    setInteractive

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

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

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

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

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

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

    tap

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

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

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    touchendoutside

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

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

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The opacity of the object.

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

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

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

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

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

    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 + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

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

    position

    + Point + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

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

    rotation

    + Number + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The rotation of the object in radians.

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

    scale

    + Point + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The scale factor of the object.

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

    stage

    + Stage + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

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

    visible

    + Boolean + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

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

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

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

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

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

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

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

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

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

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

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

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

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

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

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    mouseover

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    mouseup

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

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

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

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

    setInteractive

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

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

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

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

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

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

    tap

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

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

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    touchendoutside

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

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

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The opacity of the object.

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

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

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

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

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

    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 + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

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

    position

    + Point + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

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

    rotation

    + Number + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The rotation of the object in radians.

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

    scale

    + Point + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The scale factor of the object.

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

    stage

    + Stage + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

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

    visible

    + Boolean + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

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

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

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

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

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

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

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

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

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

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

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

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

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

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

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    mouseover

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    mouseup

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

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

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

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

    setInteractive

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

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

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

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

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

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

    tap

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

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

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    touchendoutside

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

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

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The opacity of the object.

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

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

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

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

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

    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 + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

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

    position

    + Point + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

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

    rotation

    + Number + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The rotation of the object in radians.

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

    scale

    + Point + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The scale factor of the object.

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

    stage

    + Stage + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

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

    visible

    + Boolean + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

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

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

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

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

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

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

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

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

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

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

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

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

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

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

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    mouseover

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    mouseup

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

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

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

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

    setInteractive

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

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

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

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

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

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

    tap

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

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

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    touchendoutside

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

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

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The opacity of the object.

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

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

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

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

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

    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 + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

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

    position

    + Point + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

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

    rotation

    + Number + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The rotation of the object in radians.

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

    scale

    + Point + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The scale factor of the object.

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

    stage

    + Stage + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

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

    visible

    + Boolean + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

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

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

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

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

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

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

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

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

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

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

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

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

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

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

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    mouseover

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    mouseup

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

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

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

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

    setInteractive

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

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

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

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

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

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

    tap

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

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

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    touchendoutside

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

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

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The opacity of the object.

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

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

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

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

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

    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 + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

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

    position

    + Point + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

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

    rotation

    + Number + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The rotation of the object in radians.

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

    scale

    + Point + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The scale factor of the object.

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

    stage

    + Stage + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

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

    visible

    + Boolean + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

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

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

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

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

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

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

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

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

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

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

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

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

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

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

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    mouseover

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    mouseup

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

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

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

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

    setInteractive

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

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

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

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

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

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

    tap

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

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

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    touchendoutside

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

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

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The opacity of the object.

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

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

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

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

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

    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 + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

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

    position

    + Point + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

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

    rotation

    + Number + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The rotation of the object in radians.

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

    scale

    + Point + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The scale factor of the object.

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

    stage

    + Stage + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

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

    visible

    + Boolean + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

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

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

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

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

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

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

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

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

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

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

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

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

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

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

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    mouseover

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    mouseup

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

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

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

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

    setInteractive

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

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

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

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

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

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

    tap

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

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

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    touchendoutside

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

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

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The opacity of the object.

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

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

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

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

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

    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 + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

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

    position

    + Point + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

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

    rotation

    + Number + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The rotation of the object in radians.

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

    scale

    + Point + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The scale factor of the object.

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

    stage

    + Stage + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

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

    visible

    + Boolean + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

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

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

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

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

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

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

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

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

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

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

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

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

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

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

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    mouseover

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    mouseup

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

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

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

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

    setInteractive

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

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

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

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

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

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

    tap

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

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

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    touchendoutside

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

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

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The opacity of the object.

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

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

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

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

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

    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 + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

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

    position

    + Point + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

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

    rotation

    + Number + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The rotation of the object in radians.

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

    scale

    + Point + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The scale factor of the object.

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

    stage

    + Stage + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

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

    visible

    + Boolean + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

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

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

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

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

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

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

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

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

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

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

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

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

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

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

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    mouseover

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    mouseup

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

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

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

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

    setInteractive

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

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

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

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

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

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

    tap

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

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

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    touchendoutside

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

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

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The opacity of the object.

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

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

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

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

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

    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 + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

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

    position

    + Point + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

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

    rotation

    + Number + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The rotation of the object in radians.

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

    scale

    + Point + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The scale factor of the object.

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

    stage

    + Stage + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

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

    visible

    + Boolean + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

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

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

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

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

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

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

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

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

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

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

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

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

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

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

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    mouseover

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    mouseup

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

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

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

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

    setInteractive

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

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

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

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

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

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

    tap

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

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

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    touchendoutside

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

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

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The opacity of the object.

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

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

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

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

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

    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 + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

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

    position

    + Point + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

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

    rotation

    + Number + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The rotation of the object in radians.

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

    scale

    + Point + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The scale factor of the object.

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

    stage

    + Stage + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

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

    visible

    + Boolean + + + + + + + + + +
    + + +

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

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

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

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

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

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

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

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

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

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

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

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

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

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

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

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

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    mouseover

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

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

    mouseup

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

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

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

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

    setInteractive

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

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

    + + + + + +
    + +
    +

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

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Text.js.html b/docs/files/src_pixi_Text.js.html deleted file mode 100644 index 33b7cf2..0000000 --- a/docs/files/src_pixi_Text.js.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - src/pixi/Text.js - Pixi.JS - - - - - - - - -
    -
    -
    - -

    - -
    -
    - API Docs for: 1.0.0 -
    -
    -
    - -
    - -
    -
    -
    - Show: - - - - - - - -
    - - -
    -
    -
    -

    File: src/pixi/Text.js

    - -
    - 
    -/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * A Text Object will create a line of text
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.canvas = document.createElement("canvas");
-	
-	this.context = this.canvas.getContext("2d");
-	//document.body.appendChild(this.canvas);
-	this.setText(text);
-	this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
-	
-	this.updateText();
-	
-	PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
-	
-	// need to store a canvas that can
-}
-
-// constructor
-PIXI.Text.constructor = PIXI.Text;
-PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
-
-/**
- * Set the copy for the text object
- * @methos setText
- * @param text {String} The copy that you would like the text to display
- */
-PIXI.Text.prototype.setText = function(text)
-{
-	this.text = text || " ";
-	this.dirty = true;
-}
-
-/**
- * Set the style of the text
- * @method setStyle
- * @constructor
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.fontStyle = fontStyle || "bold 20pt Arial";
-	this.fillStyle = fillStyle;
-	this.strokeStyle = strokeStyle;
-	this.strokeThickness = strokeThickness || 0;
-	
-	this.dirty = true;
-}
-
-/**
- * @private
- */
-PIXI.Text.prototype.updateText = function()
-{
-//	console.log(this.text);
-	this.context.font = this.fontStyle;
-		
-	this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
-	this.canvas.height = this.determineFontHeight("font: " + this.fontStyle  + ";")+ this.strokeThickness;// textDimensions.height;
-
-	this.context.fillStyle = this.fillStyle;
-	this.context.font = this.fontStyle;
-	
-    this.context.strokeStyle = this.strokeStyle;
-	this.context.lineWidth = this.strokeThickness;
-
-	this.context.textBaseline="top"; 
-
-    if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	
-	
-//	console.log("//")
-}
-
-PIXI.Text.prototype.updateTransform = function()
-{
-	if(this.dirty)
-	{
-		this.updateText();	
-		
-		// update the texture..
-		this.texture.baseTexture.width = this.canvas.width;
-		this.texture.baseTexture.height = this.canvas.height;
-		this.texture.frame.width = this.canvas.width;
-		this.texture.frame.height = this.canvas.height;
-		
-		PIXI.texturesToUpdate.push(this.texture.baseTexture);
-		this.dirty = false;
-	}
-	
-	PIXI.Sprite.prototype.updateTransform.call( this );
-}
-
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
-{
-	// build a little refference dictionary so if the font style has been used return a
-	// cached version...
-	var result = PIXI.Text.heightCache[fontStyle]
-	
-	if(!result)
-	{
-		var body = document.getElementsByTagName("body")[0];
-		var dummy = document.createElement("div");
-		var dummyText = document.createTextNode("M");
-		dummy.appendChild(dummyText);
-		dummy.setAttribute("style", fontStyle);
-		body.appendChild(dummy);
-		
-		result = dummy.offsetHeight;
-		PIXI.Text.heightCache[fontStyle] = result
-		
-		body.removeChild(dummy);
-	}
-	
-	return result;
-};
-
-PIXI.Text.prototype.destroy = function(destroyTexture)
-{
-	if(destroyTexture)
-	{
-		this.texture.destroy();
-	}
-		
-}
-
-PIXI.Text.heightCache = {};
-
-
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Text.js.html b/docs/files/src_pixi_Text.js.html deleted file mode 100644 index 33b7cf2..0000000 --- a/docs/files/src_pixi_Text.js.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - src/pixi/Text.js - Pixi.JS - - - - - - - - -
    -
    -
    - -

    - -
    -
    - API Docs for: 1.0.0 -
    -
    -
    - -
    - -
    -
    -
    - Show: - - - - - - - -
    - - -
    -
    -
    -

    File: src/pixi/Text.js

    - -
    - 
    -/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * A Text Object will create a line of text
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.canvas = document.createElement("canvas");
-	
-	this.context = this.canvas.getContext("2d");
-	//document.body.appendChild(this.canvas);
-	this.setText(text);
-	this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
-	
-	this.updateText();
-	
-	PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
-	
-	// need to store a canvas that can
-}
-
-// constructor
-PIXI.Text.constructor = PIXI.Text;
-PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
-
-/**
- * Set the copy for the text object
- * @methos setText
- * @param text {String} The copy that you would like the text to display
- */
-PIXI.Text.prototype.setText = function(text)
-{
-	this.text = text || " ";
-	this.dirty = true;
-}
-
-/**
- * Set the style of the text
- * @method setStyle
- * @constructor
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.fontStyle = fontStyle || "bold 20pt Arial";
-	this.fillStyle = fillStyle;
-	this.strokeStyle = strokeStyle;
-	this.strokeThickness = strokeThickness || 0;
-	
-	this.dirty = true;
-}
-
-/**
- * @private
- */
-PIXI.Text.prototype.updateText = function()
-{
-//	console.log(this.text);
-	this.context.font = this.fontStyle;
-		
-	this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
-	this.canvas.height = this.determineFontHeight("font: " + this.fontStyle  + ";")+ this.strokeThickness;// textDimensions.height;
-
-	this.context.fillStyle = this.fillStyle;
-	this.context.font = this.fontStyle;
-	
-    this.context.strokeStyle = this.strokeStyle;
-	this.context.lineWidth = this.strokeThickness;
-
-	this.context.textBaseline="top"; 
-
-    if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	
-	
-//	console.log("//")
-}
-
-PIXI.Text.prototype.updateTransform = function()
-{
-	if(this.dirty)
-	{
-		this.updateText();	
-		
-		// update the texture..
-		this.texture.baseTexture.width = this.canvas.width;
-		this.texture.baseTexture.height = this.canvas.height;
-		this.texture.frame.width = this.canvas.width;
-		this.texture.frame.height = this.canvas.height;
-		
-		PIXI.texturesToUpdate.push(this.texture.baseTexture);
-		this.dirty = false;
-	}
-	
-	PIXI.Sprite.prototype.updateTransform.call( this );
-}
-
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
-{
-	// build a little refference dictionary so if the font style has been used return a
-	// cached version...
-	var result = PIXI.Text.heightCache[fontStyle]
-	
-	if(!result)
-	{
-		var body = document.getElementsByTagName("body")[0];
-		var dummy = document.createElement("div");
-		var dummyText = document.createTextNode("M");
-		dummy.appendChild(dummyText);
-		dummy.setAttribute("style", fontStyle);
-		body.appendChild(dummy);
-		
-		result = dummy.offsetHeight;
-		PIXI.Text.heightCache[fontStyle] = result
-		
-		body.removeChild(dummy);
-	}
-	
-	return result;
-};
-
-PIXI.Text.prototype.destroy = function(destroyTexture)
-{
-	if(destroyTexture)
-	{
-		this.texture.destroy();
-	}
-		
-}
-
-PIXI.Text.heightCache = {};
-
-
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - diff --git a/docs/files/src_pixi_extras_Rope.js.html b/docs/files/src_pixi_extras_Rope.js.html index 7e2ceff..219f049 100644 --- a/docs/files/src_pixi_extras_Rope.js.html +++ b/docs/files/src_pixi_extras_Rope.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Text.js.html b/docs/files/src_pixi_Text.js.html deleted file mode 100644 index 33b7cf2..0000000 --- a/docs/files/src_pixi_Text.js.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - src/pixi/Text.js - Pixi.JS - - - - - - - - -
    -
    -
    - -

    - -
    -
    - API Docs for: 1.0.0 -
    -
    -
    - -
    - -
    -
    -
    - Show: - - - - - - - -
    - - -
    -
    -
    -

    File: src/pixi/Text.js

    - -
    - 
    -/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * A Text Object will create a line of text
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.canvas = document.createElement("canvas");
-	
-	this.context = this.canvas.getContext("2d");
-	//document.body.appendChild(this.canvas);
-	this.setText(text);
-	this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
-	
-	this.updateText();
-	
-	PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
-	
-	// need to store a canvas that can
-}
-
-// constructor
-PIXI.Text.constructor = PIXI.Text;
-PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
-
-/**
- * Set the copy for the text object
- * @methos setText
- * @param text {String} The copy that you would like the text to display
- */
-PIXI.Text.prototype.setText = function(text)
-{
-	this.text = text || " ";
-	this.dirty = true;
-}
-
-/**
- * Set the style of the text
- * @method setStyle
- * @constructor
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.fontStyle = fontStyle || "bold 20pt Arial";
-	this.fillStyle = fillStyle;
-	this.strokeStyle = strokeStyle;
-	this.strokeThickness = strokeThickness || 0;
-	
-	this.dirty = true;
-}
-
-/**
- * @private
- */
-PIXI.Text.prototype.updateText = function()
-{
-//	console.log(this.text);
-	this.context.font = this.fontStyle;
-		
-	this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
-	this.canvas.height = this.determineFontHeight("font: " + this.fontStyle  + ";")+ this.strokeThickness;// textDimensions.height;
-
-	this.context.fillStyle = this.fillStyle;
-	this.context.font = this.fontStyle;
-	
-    this.context.strokeStyle = this.strokeStyle;
-	this.context.lineWidth = this.strokeThickness;
-
-	this.context.textBaseline="top"; 
-
-    if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	
-	
-//	console.log("//")
-}
-
-PIXI.Text.prototype.updateTransform = function()
-{
-	if(this.dirty)
-	{
-		this.updateText();	
-		
-		// update the texture..
-		this.texture.baseTexture.width = this.canvas.width;
-		this.texture.baseTexture.height = this.canvas.height;
-		this.texture.frame.width = this.canvas.width;
-		this.texture.frame.height = this.canvas.height;
-		
-		PIXI.texturesToUpdate.push(this.texture.baseTexture);
-		this.dirty = false;
-	}
-	
-	PIXI.Sprite.prototype.updateTransform.call( this );
-}
-
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
-{
-	// build a little refference dictionary so if the font style has been used return a
-	// cached version...
-	var result = PIXI.Text.heightCache[fontStyle]
-	
-	if(!result)
-	{
-		var body = document.getElementsByTagName("body")[0];
-		var dummy = document.createElement("div");
-		var dummyText = document.createTextNode("M");
-		dummy.appendChild(dummyText);
-		dummy.setAttribute("style", fontStyle);
-		body.appendChild(dummy);
-		
-		result = dummy.offsetHeight;
-		PIXI.Text.heightCache[fontStyle] = result
-		
-		body.removeChild(dummy);
-	}
-	
-	return result;
-};
-
-PIXI.Text.prototype.destroy = function(destroyTexture)
-{
-	if(destroyTexture)
-	{
-		this.texture.destroy();
-	}
-		
-}
-
-PIXI.Text.heightCache = {};
-
-
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - diff --git a/docs/files/src_pixi_extras_Rope.js.html b/docs/files/src_pixi_extras_Rope.js.html index 7e2ceff..219f049 100644 --- a/docs/files/src_pixi_extras_Rope.js.html +++ b/docs/files/src_pixi_extras_Rope.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_Strip.js.html b/docs/files/src_pixi_extras_Strip.js.html index 8f748c2..a7a64cd 100644 --- a/docs/files/src_pixi_extras_Strip.js.html +++ b/docs/files/src_pixi_extras_Strip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Text.js.html b/docs/files/src_pixi_Text.js.html deleted file mode 100644 index 33b7cf2..0000000 --- a/docs/files/src_pixi_Text.js.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - src/pixi/Text.js - Pixi.JS - - - - - - - - -
    -
    -
    - -

    - -
    -
    - API Docs for: 1.0.0 -
    -
    -
    - -
    - -
    -
    -
    - Show: - - - - - - - -
    - - -
    -
    -
    -

    File: src/pixi/Text.js

    - -
    - 
    -/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * A Text Object will create a line of text
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.canvas = document.createElement("canvas");
-	
-	this.context = this.canvas.getContext("2d");
-	//document.body.appendChild(this.canvas);
-	this.setText(text);
-	this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
-	
-	this.updateText();
-	
-	PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
-	
-	// need to store a canvas that can
-}
-
-// constructor
-PIXI.Text.constructor = PIXI.Text;
-PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
-
-/**
- * Set the copy for the text object
- * @methos setText
- * @param text {String} The copy that you would like the text to display
- */
-PIXI.Text.prototype.setText = function(text)
-{
-	this.text = text || " ";
-	this.dirty = true;
-}
-
-/**
- * Set the style of the text
- * @method setStyle
- * @constructor
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.fontStyle = fontStyle || "bold 20pt Arial";
-	this.fillStyle = fillStyle;
-	this.strokeStyle = strokeStyle;
-	this.strokeThickness = strokeThickness || 0;
-	
-	this.dirty = true;
-}
-
-/**
- * @private
- */
-PIXI.Text.prototype.updateText = function()
-{
-//	console.log(this.text);
-	this.context.font = this.fontStyle;
-		
-	this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
-	this.canvas.height = this.determineFontHeight("font: " + this.fontStyle  + ";")+ this.strokeThickness;// textDimensions.height;
-
-	this.context.fillStyle = this.fillStyle;
-	this.context.font = this.fontStyle;
-	
-    this.context.strokeStyle = this.strokeStyle;
-	this.context.lineWidth = this.strokeThickness;
-
-	this.context.textBaseline="top"; 
-
-    if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	
-	
-//	console.log("//")
-}
-
-PIXI.Text.prototype.updateTransform = function()
-{
-	if(this.dirty)
-	{
-		this.updateText();	
-		
-		// update the texture..
-		this.texture.baseTexture.width = this.canvas.width;
-		this.texture.baseTexture.height = this.canvas.height;
-		this.texture.frame.width = this.canvas.width;
-		this.texture.frame.height = this.canvas.height;
-		
-		PIXI.texturesToUpdate.push(this.texture.baseTexture);
-		this.dirty = false;
-	}
-	
-	PIXI.Sprite.prototype.updateTransform.call( this );
-}
-
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
-{
-	// build a little refference dictionary so if the font style has been used return a
-	// cached version...
-	var result = PIXI.Text.heightCache[fontStyle]
-	
-	if(!result)
-	{
-		var body = document.getElementsByTagName("body")[0];
-		var dummy = document.createElement("div");
-		var dummyText = document.createTextNode("M");
-		dummy.appendChild(dummyText);
-		dummy.setAttribute("style", fontStyle);
-		body.appendChild(dummy);
-		
-		result = dummy.offsetHeight;
-		PIXI.Text.heightCache[fontStyle] = result
-		
-		body.removeChild(dummy);
-	}
-	
-	return result;
-};
-
-PIXI.Text.prototype.destroy = function(destroyTexture)
-{
-	if(destroyTexture)
-	{
-		this.texture.destroy();
-	}
-		
-}
-
-PIXI.Text.heightCache = {};
-
-
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - diff --git a/docs/files/src_pixi_extras_Rope.js.html b/docs/files/src_pixi_extras_Rope.js.html index 7e2ceff..219f049 100644 --- a/docs/files/src_pixi_extras_Rope.js.html +++ b/docs/files/src_pixi_extras_Rope.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_Strip.js.html b/docs/files/src_pixi_extras_Strip.js.html index 8f748c2..a7a64cd 100644 --- a/docs/files/src_pixi_extras_Strip.js.html +++ b/docs/files/src_pixi_extras_Strip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_TilingSprite.js.html b/docs/files/src_pixi_extras_TilingSprite.js.html index af3d84d..b61c15f 100644 --- a/docs/files/src_pixi_extras_TilingSprite.js.html +++ b/docs/files/src_pixi_extras_TilingSprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Text.js.html b/docs/files/src_pixi_Text.js.html deleted file mode 100644 index 33b7cf2..0000000 --- a/docs/files/src_pixi_Text.js.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - src/pixi/Text.js - Pixi.JS - - - - - - - - -
    -
    -
    - -

    - -
    -
    - API Docs for: 1.0.0 -
    -
    -
    - -
    - -
    -
    -
    - Show: - - - - - - - -
    - - -
    -
    -
    -

    File: src/pixi/Text.js

    - -
    - 
    -/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * A Text Object will create a line of text
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.canvas = document.createElement("canvas");
-	
-	this.context = this.canvas.getContext("2d");
-	//document.body.appendChild(this.canvas);
-	this.setText(text);
-	this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
-	
-	this.updateText();
-	
-	PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
-	
-	// need to store a canvas that can
-}
-
-// constructor
-PIXI.Text.constructor = PIXI.Text;
-PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
-
-/**
- * Set the copy for the text object
- * @methos setText
- * @param text {String} The copy that you would like the text to display
- */
-PIXI.Text.prototype.setText = function(text)
-{
-	this.text = text || " ";
-	this.dirty = true;
-}
-
-/**
- * Set the style of the text
- * @method setStyle
- * @constructor
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.fontStyle = fontStyle || "bold 20pt Arial";
-	this.fillStyle = fillStyle;
-	this.strokeStyle = strokeStyle;
-	this.strokeThickness = strokeThickness || 0;
-	
-	this.dirty = true;
-}
-
-/**
- * @private
- */
-PIXI.Text.prototype.updateText = function()
-{
-//	console.log(this.text);
-	this.context.font = this.fontStyle;
-		
-	this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
-	this.canvas.height = this.determineFontHeight("font: " + this.fontStyle  + ";")+ this.strokeThickness;// textDimensions.height;
-
-	this.context.fillStyle = this.fillStyle;
-	this.context.font = this.fontStyle;
-	
-    this.context.strokeStyle = this.strokeStyle;
-	this.context.lineWidth = this.strokeThickness;
-
-	this.context.textBaseline="top"; 
-
-    if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	
-	
-//	console.log("//")
-}
-
-PIXI.Text.prototype.updateTransform = function()
-{
-	if(this.dirty)
-	{
-		this.updateText();	
-		
-		// update the texture..
-		this.texture.baseTexture.width = this.canvas.width;
-		this.texture.baseTexture.height = this.canvas.height;
-		this.texture.frame.width = this.canvas.width;
-		this.texture.frame.height = this.canvas.height;
-		
-		PIXI.texturesToUpdate.push(this.texture.baseTexture);
-		this.dirty = false;
-	}
-	
-	PIXI.Sprite.prototype.updateTransform.call( this );
-}
-
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
-{
-	// build a little refference dictionary so if the font style has been used return a
-	// cached version...
-	var result = PIXI.Text.heightCache[fontStyle]
-	
-	if(!result)
-	{
-		var body = document.getElementsByTagName("body")[0];
-		var dummy = document.createElement("div");
-		var dummyText = document.createTextNode("M");
-		dummy.appendChild(dummyText);
-		dummy.setAttribute("style", fontStyle);
-		body.appendChild(dummy);
-		
-		result = dummy.offsetHeight;
-		PIXI.Text.heightCache[fontStyle] = result
-		
-		body.removeChild(dummy);
-	}
-	
-	return result;
-};
-
-PIXI.Text.prototype.destroy = function(destroyTexture)
-{
-	if(destroyTexture)
-	{
-		this.texture.destroy();
-	}
-		
-}
-
-PIXI.Text.heightCache = {};
-
-
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - diff --git a/docs/files/src_pixi_extras_Rope.js.html b/docs/files/src_pixi_extras_Rope.js.html index 7e2ceff..219f049 100644 --- a/docs/files/src_pixi_extras_Rope.js.html +++ b/docs/files/src_pixi_extras_Rope.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_Strip.js.html b/docs/files/src_pixi_extras_Strip.js.html index 8f748c2..a7a64cd 100644 --- a/docs/files/src_pixi_extras_Strip.js.html +++ b/docs/files/src_pixi_extras_Strip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_TilingSprite.js.html b/docs/files/src_pixi_extras_TilingSprite.js.html index af3d84d..b61c15f 100644 --- a/docs/files/src_pixi_extras_TilingSprite.js.html +++ b/docs/files/src_pixi_extras_TilingSprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_loaders_AssetLoader.js.html b/docs/files/src_pixi_loaders_AssetLoader.js.html index 089d5cf..594481e 100644 --- a/docs/files/src_pixi_loaders_AssetLoader.js.html +++ b/docs/files/src_pixi_loaders_AssetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -127,17 +133,17 @@ */ /** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -145,11 +151,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -169,105 +183,45 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Text.js.html b/docs/files/src_pixi_Text.js.html deleted file mode 100644 index 33b7cf2..0000000 --- a/docs/files/src_pixi_Text.js.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - src/pixi/Text.js - Pixi.JS - - - - - - - - -
    -
    -
    - -

    - -
    -
    - API Docs for: 1.0.0 -
    -
    -
    - -
    - -
    -
    -
    - Show: - - - - - - - -
    - - -
    -
    -
    -

    File: src/pixi/Text.js

    - -
    - 
    -/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * A Text Object will create a line of text
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.canvas = document.createElement("canvas");
-	
-	this.context = this.canvas.getContext("2d");
-	//document.body.appendChild(this.canvas);
-	this.setText(text);
-	this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
-	
-	this.updateText();
-	
-	PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
-	
-	// need to store a canvas that can
-}
-
-// constructor
-PIXI.Text.constructor = PIXI.Text;
-PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
-
-/**
- * Set the copy for the text object
- * @methos setText
- * @param text {String} The copy that you would like the text to display
- */
-PIXI.Text.prototype.setText = function(text)
-{
-	this.text = text || " ";
-	this.dirty = true;
-}
-
-/**
- * Set the style of the text
- * @method setStyle
- * @constructor
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.fontStyle = fontStyle || "bold 20pt Arial";
-	this.fillStyle = fillStyle;
-	this.strokeStyle = strokeStyle;
-	this.strokeThickness = strokeThickness || 0;
-	
-	this.dirty = true;
-}
-
-/**
- * @private
- */
-PIXI.Text.prototype.updateText = function()
-{
-//	console.log(this.text);
-	this.context.font = this.fontStyle;
-		
-	this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
-	this.canvas.height = this.determineFontHeight("font: " + this.fontStyle  + ";")+ this.strokeThickness;// textDimensions.height;
-
-	this.context.fillStyle = this.fillStyle;
-	this.context.font = this.fontStyle;
-	
-    this.context.strokeStyle = this.strokeStyle;
-	this.context.lineWidth = this.strokeThickness;
-
-	this.context.textBaseline="top"; 
-
-    if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	
-	
-//	console.log("//")
-}
-
-PIXI.Text.prototype.updateTransform = function()
-{
-	if(this.dirty)
-	{
-		this.updateText();	
-		
-		// update the texture..
-		this.texture.baseTexture.width = this.canvas.width;
-		this.texture.baseTexture.height = this.canvas.height;
-		this.texture.frame.width = this.canvas.width;
-		this.texture.frame.height = this.canvas.height;
-		
-		PIXI.texturesToUpdate.push(this.texture.baseTexture);
-		this.dirty = false;
-	}
-	
-	PIXI.Sprite.prototype.updateTransform.call( this );
-}
-
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
-{
-	// build a little refference dictionary so if the font style has been used return a
-	// cached version...
-	var result = PIXI.Text.heightCache[fontStyle]
-	
-	if(!result)
-	{
-		var body = document.getElementsByTagName("body")[0];
-		var dummy = document.createElement("div");
-		var dummyText = document.createTextNode("M");
-		dummy.appendChild(dummyText);
-		dummy.setAttribute("style", fontStyle);
-		body.appendChild(dummy);
-		
-		result = dummy.offsetHeight;
-		PIXI.Text.heightCache[fontStyle] = result
-		
-		body.removeChild(dummy);
-	}
-	
-	return result;
-};
-
-PIXI.Text.prototype.destroy = function(destroyTexture)
-{
-	if(destroyTexture)
-	{
-		this.texture.destroy();
-	}
-		
-}
-
-PIXI.Text.heightCache = {};
-
-
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - diff --git a/docs/files/src_pixi_extras_Rope.js.html b/docs/files/src_pixi_extras_Rope.js.html index 7e2ceff..219f049 100644 --- a/docs/files/src_pixi_extras_Rope.js.html +++ b/docs/files/src_pixi_extras_Rope.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_Strip.js.html b/docs/files/src_pixi_extras_Strip.js.html index 8f748c2..a7a64cd 100644 --- a/docs/files/src_pixi_extras_Strip.js.html +++ b/docs/files/src_pixi_extras_Strip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_TilingSprite.js.html b/docs/files/src_pixi_extras_TilingSprite.js.html index af3d84d..b61c15f 100644 --- a/docs/files/src_pixi_extras_TilingSprite.js.html +++ b/docs/files/src_pixi_extras_TilingSprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_loaders_AssetLoader.js.html b/docs/files/src_pixi_loaders_AssetLoader.js.html index 089d5cf..594481e 100644 --- a/docs/files/src_pixi_loaders_AssetLoader.js.html +++ b/docs/files/src_pixi_loaders_AssetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -127,17 +133,17 @@ */ /** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -145,11 +151,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -169,105 +183,45 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; diff --git a/docs/files/src_pixi_loaders_BitmapFontLoader.js.html b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html new file mode 100644 index 0000000..6fd5d80 --- /dev/null +++ b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html @@ -0,0 +1,275 @@ + + + + + src/pixi/loaders/BitmapFontLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/BitmapFontLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The xml loader is used to load in XML bitmap font data ("xml" or "fnt")
+ * To generate the data you can use http://www.angelcode.com/products/bmfont/
+ * This loader will also load the image file as the data.
+ * When loaded this class will dispatch a "loaded" event
+ * @class BitmapFontLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url the url of the sprite sheet JSON file
+ * @param {Boolean} crossorigin
+ */
+
+PIXI.BitmapFontLoader = function(url, crossorigin)
+{
+    /*
+     * i use texture packer to load the assets..
+     * http://www.codeandweb.com/texturepacker
+     * make sure to set the format as "JSON"
+     */
+    PIXI.EventTarget.call(this);
+    this.url = url;
+    this.baseUrl = url.replace(/[^\/]*$/, "");
+    this.texture = null;
+    this.crossorigin = crossorigin;
+};
+
+// constructor
+PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader;
+
+/**
+ * This will begin loading the JSON file
+ */
+PIXI.BitmapFontLoader.prototype.load = function()
+{
+    this.ajaxRequest = new XMLHttpRequest();
+    var scope = this;
+    this.ajaxRequest.onreadystatechange = function()
+    {
+        scope.onXMLLoaded();
+    };
+
+    this.ajaxRequest.open("GET", this.url, true);
+    if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml");
+    this.ajaxRequest.send(null)
+};
+
+/**
+ * Invoked when XML file is loaded
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
+{
+    if (this.ajaxRequest.readyState == 4)
+    {
+        if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1)
+        {
+            var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue;
+            var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
+            this.texture = image.texture.baseTexture;
+
+            var data = {};
+            var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0];
+            var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0];
+            data.font = info.attributes.getNamedItem("face").nodeValue;
+            data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10);
+            data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10);
+            data.chars = {};
+
+            //parse letters
+            var letters = this.ajaxRequest.responseXML.getElementsByTagName("char");
+
+            for (var i = 0; i < letters.length; i++)
+            {
+                var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10);
+
+                var textureRect = {
+                    x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10),
+                    y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10),
+                    width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10),
+                    height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10)
+                };
+                PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect);
+
+                data.chars[charCode] = {
+                    xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10),
+                    yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10),
+                    xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10),
+                    kerning: {}
+                };
+            }
+
+            //parse kernings
+            var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning");
+            for (i = 0; i < kernings.length; i++)
+            {
+               var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10);
+               var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10);
+               var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10);
+
+                data.chars[second].kerning[first] = amount;
+
+            }
+            PIXI.BitmapText.fonts[data.font] = data;
+
+            var scope = this;
+            image.addEventListener("loaded", function() {
+                scope.onLoaded();
+            });
+            image.load();
+        }
+    }
+};
+
+/**
+ * Invoked when all files are loaded (xml/fnt and texture)
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Text.js.html b/docs/files/src_pixi_Text.js.html deleted file mode 100644 index 33b7cf2..0000000 --- a/docs/files/src_pixi_Text.js.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - src/pixi/Text.js - Pixi.JS - - - - - - - - -
    -
    -
    - -

    - -
    -
    - API Docs for: 1.0.0 -
    -
    -
    - -
    - -
    -
    -
    - Show: - - - - - - - -
    - - -
    -
    -
    -

    File: src/pixi/Text.js

    - -
    - 
    -/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * A Text Object will create a line of text
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.canvas = document.createElement("canvas");
-	
-	this.context = this.canvas.getContext("2d");
-	//document.body.appendChild(this.canvas);
-	this.setText(text);
-	this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
-	
-	this.updateText();
-	
-	PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
-	
-	// need to store a canvas that can
-}
-
-// constructor
-PIXI.Text.constructor = PIXI.Text;
-PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
-
-/**
- * Set the copy for the text object
- * @methos setText
- * @param text {String} The copy that you would like the text to display
- */
-PIXI.Text.prototype.setText = function(text)
-{
-	this.text = text || " ";
-	this.dirty = true;
-}
-
-/**
- * Set the style of the text
- * @method setStyle
- * @constructor
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.fontStyle = fontStyle || "bold 20pt Arial";
-	this.fillStyle = fillStyle;
-	this.strokeStyle = strokeStyle;
-	this.strokeThickness = strokeThickness || 0;
-	
-	this.dirty = true;
-}
-
-/**
- * @private
- */
-PIXI.Text.prototype.updateText = function()
-{
-//	console.log(this.text);
-	this.context.font = this.fontStyle;
-		
-	this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
-	this.canvas.height = this.determineFontHeight("font: " + this.fontStyle  + ";")+ this.strokeThickness;// textDimensions.height;
-
-	this.context.fillStyle = this.fillStyle;
-	this.context.font = this.fontStyle;
-	
-    this.context.strokeStyle = this.strokeStyle;
-	this.context.lineWidth = this.strokeThickness;
-
-	this.context.textBaseline="top"; 
-
-    if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	
-	
-//	console.log("//")
-}
-
-PIXI.Text.prototype.updateTransform = function()
-{
-	if(this.dirty)
-	{
-		this.updateText();	
-		
-		// update the texture..
-		this.texture.baseTexture.width = this.canvas.width;
-		this.texture.baseTexture.height = this.canvas.height;
-		this.texture.frame.width = this.canvas.width;
-		this.texture.frame.height = this.canvas.height;
-		
-		PIXI.texturesToUpdate.push(this.texture.baseTexture);
-		this.dirty = false;
-	}
-	
-	PIXI.Sprite.prototype.updateTransform.call( this );
-}
-
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
-{
-	// build a little refference dictionary so if the font style has been used return a
-	// cached version...
-	var result = PIXI.Text.heightCache[fontStyle]
-	
-	if(!result)
-	{
-		var body = document.getElementsByTagName("body")[0];
-		var dummy = document.createElement("div");
-		var dummyText = document.createTextNode("M");
-		dummy.appendChild(dummyText);
-		dummy.setAttribute("style", fontStyle);
-		body.appendChild(dummy);
-		
-		result = dummy.offsetHeight;
-		PIXI.Text.heightCache[fontStyle] = result
-		
-		body.removeChild(dummy);
-	}
-	
-	return result;
-};
-
-PIXI.Text.prototype.destroy = function(destroyTexture)
-{
-	if(destroyTexture)
-	{
-		this.texture.destroy();
-	}
-		
-}
-
-PIXI.Text.heightCache = {};
-
-
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - diff --git a/docs/files/src_pixi_extras_Rope.js.html b/docs/files/src_pixi_extras_Rope.js.html index 7e2ceff..219f049 100644 --- a/docs/files/src_pixi_extras_Rope.js.html +++ b/docs/files/src_pixi_extras_Rope.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_Strip.js.html b/docs/files/src_pixi_extras_Strip.js.html index 8f748c2..a7a64cd 100644 --- a/docs/files/src_pixi_extras_Strip.js.html +++ b/docs/files/src_pixi_extras_Strip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_TilingSprite.js.html b/docs/files/src_pixi_extras_TilingSprite.js.html index af3d84d..b61c15f 100644 --- a/docs/files/src_pixi_extras_TilingSprite.js.html +++ b/docs/files/src_pixi_extras_TilingSprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_loaders_AssetLoader.js.html b/docs/files/src_pixi_loaders_AssetLoader.js.html index 089d5cf..594481e 100644 --- a/docs/files/src_pixi_loaders_AssetLoader.js.html +++ b/docs/files/src_pixi_loaders_AssetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -127,17 +133,17 @@ */ /** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -145,11 +151,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -169,105 +183,45 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; diff --git a/docs/files/src_pixi_loaders_BitmapFontLoader.js.html b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html new file mode 100644 index 0000000..6fd5d80 --- /dev/null +++ b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html @@ -0,0 +1,275 @@ + + + + + src/pixi/loaders/BitmapFontLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/BitmapFontLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The xml loader is used to load in XML bitmap font data ("xml" or "fnt")
+ * To generate the data you can use http://www.angelcode.com/products/bmfont/
+ * This loader will also load the image file as the data.
+ * When loaded this class will dispatch a "loaded" event
+ * @class BitmapFontLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url the url of the sprite sheet JSON file
+ * @param {Boolean} crossorigin
+ */
+
+PIXI.BitmapFontLoader = function(url, crossorigin)
+{
+    /*
+     * i use texture packer to load the assets..
+     * http://www.codeandweb.com/texturepacker
+     * make sure to set the format as "JSON"
+     */
+    PIXI.EventTarget.call(this);
+    this.url = url;
+    this.baseUrl = url.replace(/[^\/]*$/, "");
+    this.texture = null;
+    this.crossorigin = crossorigin;
+};
+
+// constructor
+PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader;
+
+/**
+ * This will begin loading the JSON file
+ */
+PIXI.BitmapFontLoader.prototype.load = function()
+{
+    this.ajaxRequest = new XMLHttpRequest();
+    var scope = this;
+    this.ajaxRequest.onreadystatechange = function()
+    {
+        scope.onXMLLoaded();
+    };
+
+    this.ajaxRequest.open("GET", this.url, true);
+    if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml");
+    this.ajaxRequest.send(null)
+};
+
+/**
+ * Invoked when XML file is loaded
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
+{
+    if (this.ajaxRequest.readyState == 4)
+    {
+        if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1)
+        {
+            var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue;
+            var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
+            this.texture = image.texture.baseTexture;
+
+            var data = {};
+            var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0];
+            var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0];
+            data.font = info.attributes.getNamedItem("face").nodeValue;
+            data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10);
+            data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10);
+            data.chars = {};
+
+            //parse letters
+            var letters = this.ajaxRequest.responseXML.getElementsByTagName("char");
+
+            for (var i = 0; i < letters.length; i++)
+            {
+                var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10);
+
+                var textureRect = {
+                    x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10),
+                    y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10),
+                    width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10),
+                    height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10)
+                };
+                PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect);
+
+                data.chars[charCode] = {
+                    xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10),
+                    yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10),
+                    xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10),
+                    kerning: {}
+                };
+            }
+
+            //parse kernings
+            var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning");
+            for (i = 0; i < kernings.length; i++)
+            {
+               var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10);
+               var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10);
+               var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10);
+
+                data.chars[second].kerning[first] = amount;
+
+            }
+            PIXI.BitmapText.fonts[data.font] = data;
+
+            var scope = this;
+            image.addEventListener("loaded", function() {
+                scope.onLoaded();
+            });
+            image.load();
+        }
+    }
+};
+
+/**
+ * Invoked when all files are loaded (xml/fnt and texture)
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_ImageLoader.js.html b/docs/files/src_pixi_loaders_ImageLoader.js.html new file mode 100644 index 0000000..f6fcf07 --- /dev/null +++ b/docs/files/src_pixi_loaders_ImageLoader.js.html @@ -0,0 +1,200 @@ + + + + + src/pixi/loaders/ImageLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/ImageLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif")
+ * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
+ * When loaded this class will dispatch a 'loaded' event
+ * @class ImageLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url The url of the image
+ * @param {Boolean} crossorigin
+ */
+PIXI.ImageLoader = function(url, crossorigin)
+{
+    PIXI.EventTarget.call(this);
+    this.texture = PIXI.Texture.fromImage(url, crossorigin);
+};
+
+// constructor
+PIXI.ImageLoader.constructor = PIXI.ImageLoader;
+
+/**
+ * Loads image or takes it from cache
+ */
+PIXI.ImageLoader.prototype.load = function()
+{
+    if(!this.texture.baseTexture.hasLoaded)
+    {
+        var scope = this;
+        this.texture.baseTexture.addEventListener("loaded", function()
+        {
+            scope.onLoaded();
+        });
+    }
+    else
+    {
+        this.onLoaded();
+    }
+};
+
+/**
+ * Invoked when image file is loaded or it is already cached and ready to use
+ * @private
+ */
+PIXI.ImageLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Text.js.html b/docs/files/src_pixi_Text.js.html deleted file mode 100644 index 33b7cf2..0000000 --- a/docs/files/src_pixi_Text.js.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - src/pixi/Text.js - Pixi.JS - - - - - - - - -
    -
    -
    - -

    - -
    -
    - API Docs for: 1.0.0 -
    -
    -
    - -
    - -
    -
    -
    - Show: - - - - - - - -
    - - -
    -
    -
    -

    File: src/pixi/Text.js

    - -
    - 
    -/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * A Text Object will create a line of text
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.canvas = document.createElement("canvas");
-	
-	this.context = this.canvas.getContext("2d");
-	//document.body.appendChild(this.canvas);
-	this.setText(text);
-	this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
-	
-	this.updateText();
-	
-	PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
-	
-	// need to store a canvas that can
-}
-
-// constructor
-PIXI.Text.constructor = PIXI.Text;
-PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
-
-/**
- * Set the copy for the text object
- * @methos setText
- * @param text {String} The copy that you would like the text to display
- */
-PIXI.Text.prototype.setText = function(text)
-{
-	this.text = text || " ";
-	this.dirty = true;
-}
-
-/**
- * Set the style of the text
- * @method setStyle
- * @constructor
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.fontStyle = fontStyle || "bold 20pt Arial";
-	this.fillStyle = fillStyle;
-	this.strokeStyle = strokeStyle;
-	this.strokeThickness = strokeThickness || 0;
-	
-	this.dirty = true;
-}
-
-/**
- * @private
- */
-PIXI.Text.prototype.updateText = function()
-{
-//	console.log(this.text);
-	this.context.font = this.fontStyle;
-		
-	this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
-	this.canvas.height = this.determineFontHeight("font: " + this.fontStyle  + ";")+ this.strokeThickness;// textDimensions.height;
-
-	this.context.fillStyle = this.fillStyle;
-	this.context.font = this.fontStyle;
-	
-    this.context.strokeStyle = this.strokeStyle;
-	this.context.lineWidth = this.strokeThickness;
-
-	this.context.textBaseline="top"; 
-
-    if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	
-	
-//	console.log("//")
-}
-
-PIXI.Text.prototype.updateTransform = function()
-{
-	if(this.dirty)
-	{
-		this.updateText();	
-		
-		// update the texture..
-		this.texture.baseTexture.width = this.canvas.width;
-		this.texture.baseTexture.height = this.canvas.height;
-		this.texture.frame.width = this.canvas.width;
-		this.texture.frame.height = this.canvas.height;
-		
-		PIXI.texturesToUpdate.push(this.texture.baseTexture);
-		this.dirty = false;
-	}
-	
-	PIXI.Sprite.prototype.updateTransform.call( this );
-}
-
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
-{
-	// build a little refference dictionary so if the font style has been used return a
-	// cached version...
-	var result = PIXI.Text.heightCache[fontStyle]
-	
-	if(!result)
-	{
-		var body = document.getElementsByTagName("body")[0];
-		var dummy = document.createElement("div");
-		var dummyText = document.createTextNode("M");
-		dummy.appendChild(dummyText);
-		dummy.setAttribute("style", fontStyle);
-		body.appendChild(dummy);
-		
-		result = dummy.offsetHeight;
-		PIXI.Text.heightCache[fontStyle] = result
-		
-		body.removeChild(dummy);
-	}
-	
-	return result;
-};
-
-PIXI.Text.prototype.destroy = function(destroyTexture)
-{
-	if(destroyTexture)
-	{
-		this.texture.destroy();
-	}
-		
-}
-
-PIXI.Text.heightCache = {};
-
-
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - diff --git a/docs/files/src_pixi_extras_Rope.js.html b/docs/files/src_pixi_extras_Rope.js.html index 7e2ceff..219f049 100644 --- a/docs/files/src_pixi_extras_Rope.js.html +++ b/docs/files/src_pixi_extras_Rope.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_Strip.js.html b/docs/files/src_pixi_extras_Strip.js.html index 8f748c2..a7a64cd 100644 --- a/docs/files/src_pixi_extras_Strip.js.html +++ b/docs/files/src_pixi_extras_Strip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_TilingSprite.js.html b/docs/files/src_pixi_extras_TilingSprite.js.html index af3d84d..b61c15f 100644 --- a/docs/files/src_pixi_extras_TilingSprite.js.html +++ b/docs/files/src_pixi_extras_TilingSprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_loaders_AssetLoader.js.html b/docs/files/src_pixi_loaders_AssetLoader.js.html index 089d5cf..594481e 100644 --- a/docs/files/src_pixi_loaders_AssetLoader.js.html +++ b/docs/files/src_pixi_loaders_AssetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -127,17 +133,17 @@ */ /** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -145,11 +151,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -169,105 +183,45 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; diff --git a/docs/files/src_pixi_loaders_BitmapFontLoader.js.html b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html new file mode 100644 index 0000000..6fd5d80 --- /dev/null +++ b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html @@ -0,0 +1,275 @@ + + + + + src/pixi/loaders/BitmapFontLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/BitmapFontLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The xml loader is used to load in XML bitmap font data ("xml" or "fnt")
+ * To generate the data you can use http://www.angelcode.com/products/bmfont/
+ * This loader will also load the image file as the data.
+ * When loaded this class will dispatch a "loaded" event
+ * @class BitmapFontLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url the url of the sprite sheet JSON file
+ * @param {Boolean} crossorigin
+ */
+
+PIXI.BitmapFontLoader = function(url, crossorigin)
+{
+    /*
+     * i use texture packer to load the assets..
+     * http://www.codeandweb.com/texturepacker
+     * make sure to set the format as "JSON"
+     */
+    PIXI.EventTarget.call(this);
+    this.url = url;
+    this.baseUrl = url.replace(/[^\/]*$/, "");
+    this.texture = null;
+    this.crossorigin = crossorigin;
+};
+
+// constructor
+PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader;
+
+/**
+ * This will begin loading the JSON file
+ */
+PIXI.BitmapFontLoader.prototype.load = function()
+{
+    this.ajaxRequest = new XMLHttpRequest();
+    var scope = this;
+    this.ajaxRequest.onreadystatechange = function()
+    {
+        scope.onXMLLoaded();
+    };
+
+    this.ajaxRequest.open("GET", this.url, true);
+    if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml");
+    this.ajaxRequest.send(null)
+};
+
+/**
+ * Invoked when XML file is loaded
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
+{
+    if (this.ajaxRequest.readyState == 4)
+    {
+        if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1)
+        {
+            var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue;
+            var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
+            this.texture = image.texture.baseTexture;
+
+            var data = {};
+            var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0];
+            var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0];
+            data.font = info.attributes.getNamedItem("face").nodeValue;
+            data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10);
+            data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10);
+            data.chars = {};
+
+            //parse letters
+            var letters = this.ajaxRequest.responseXML.getElementsByTagName("char");
+
+            for (var i = 0; i < letters.length; i++)
+            {
+                var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10);
+
+                var textureRect = {
+                    x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10),
+                    y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10),
+                    width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10),
+                    height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10)
+                };
+                PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect);
+
+                data.chars[charCode] = {
+                    xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10),
+                    yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10),
+                    xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10),
+                    kerning: {}
+                };
+            }
+
+            //parse kernings
+            var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning");
+            for (i = 0; i < kernings.length; i++)
+            {
+               var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10);
+               var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10);
+               var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10);
+
+                data.chars[second].kerning[first] = amount;
+
+            }
+            PIXI.BitmapText.fonts[data.font] = data;
+
+            var scope = this;
+            image.addEventListener("loaded", function() {
+                scope.onLoaded();
+            });
+            image.load();
+        }
+    }
+};
+
+/**
+ * Invoked when all files are loaded (xml/fnt and texture)
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_ImageLoader.js.html b/docs/files/src_pixi_loaders_ImageLoader.js.html new file mode 100644 index 0000000..f6fcf07 --- /dev/null +++ b/docs/files/src_pixi_loaders_ImageLoader.js.html @@ -0,0 +1,200 @@ + + + + + src/pixi/loaders/ImageLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/ImageLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif")
+ * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
+ * When loaded this class will dispatch a 'loaded' event
+ * @class ImageLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url The url of the image
+ * @param {Boolean} crossorigin
+ */
+PIXI.ImageLoader = function(url, crossorigin)
+{
+    PIXI.EventTarget.call(this);
+    this.texture = PIXI.Texture.fromImage(url, crossorigin);
+};
+
+// constructor
+PIXI.ImageLoader.constructor = PIXI.ImageLoader;
+
+/**
+ * Loads image or takes it from cache
+ */
+PIXI.ImageLoader.prototype.load = function()
+{
+    if(!this.texture.baseTexture.hasLoaded)
+    {
+        var scope = this;
+        this.texture.baseTexture.addEventListener("loaded", function()
+        {
+            scope.onLoaded();
+        });
+    }
+    else
+    {
+        this.onLoaded();
+    }
+};
+
+/**
+ * Invoked when image file is loaded or it is already cached and ready to use
+ * @private
+ */
+PIXI.ImageLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 5510866..3b14d2f 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,30 +136,31 @@ * The sprite sheet loader is used to load in JSON sprite sheet data * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event + * When loaded this class will dispatch a "loaded" event * @class SpriteSheetLoader * @extends EventTarget * @constructor - * @param url {String} the url of the sprite sheet JSON file + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin */ -PIXI.SpriteSheetLoader = function(url) +PIXI.SpriteSheetLoader = function(url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker * make sure to set the format as "JSON" */ - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; this.frames = {}; - this.crossorigin = false; -} + this.crossorigin = crossorigin; +}; // constructor PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; @@ -165,32 +172,38 @@ { this.ajaxRequest = new AjaxRequest(); var scope = this; - this.ajaxRequest.onreadystatechange=function() + this.ajaxRequest.onreadystatechange = function() { - scope.onLoaded(); - } + scope.onJSONLoaded(); + }; - this.ajaxRequest.open("GET", this.url, true) + this.ajaxRequest.open("GET", this.url, true); if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); this.ajaxRequest.send(null) -} +}; -PIXI.SpriteSheetLoader.prototype.onLoaded = function() +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() { - if (this.ajaxRequest.readyState==4) + if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) { var rect = frameData[i].frame; if (rect) @@ -201,32 +214,24 @@ { //var realSize = frameData[i].spriteSourceSize; PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + PIXI.TextureCache[i].trim.x = 0;// (realSize.x / rect.w) // calculate the offset! } - // this.frames[i] = ; } } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Text.js.html b/docs/files/src_pixi_Text.js.html deleted file mode 100644 index 33b7cf2..0000000 --- a/docs/files/src_pixi_Text.js.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - src/pixi/Text.js - Pixi.JS - - - - - - - - -
    -
    -
    - -

    - -
    -
    - API Docs for: 1.0.0 -
    -
    -
    - -
    - -
    -
    -
    - Show: - - - - - - - -
    - - -
    -
    -
    -

    File: src/pixi/Text.js

    - -
    - 
    -/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * A Text Object will create a line of text
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.canvas = document.createElement("canvas");
-	
-	this.context = this.canvas.getContext("2d");
-	//document.body.appendChild(this.canvas);
-	this.setText(text);
-	this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
-	
-	this.updateText();
-	
-	PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
-	
-	// need to store a canvas that can
-}
-
-// constructor
-PIXI.Text.constructor = PIXI.Text;
-PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
-
-/**
- * Set the copy for the text object
- * @methos setText
- * @param text {String} The copy that you would like the text to display
- */
-PIXI.Text.prototype.setText = function(text)
-{
-	this.text = text || " ";
-	this.dirty = true;
-}
-
-/**
- * Set the style of the text
- * @method setStyle
- * @constructor
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.fontStyle = fontStyle || "bold 20pt Arial";
-	this.fillStyle = fillStyle;
-	this.strokeStyle = strokeStyle;
-	this.strokeThickness = strokeThickness || 0;
-	
-	this.dirty = true;
-}
-
-/**
- * @private
- */
-PIXI.Text.prototype.updateText = function()
-{
-//	console.log(this.text);
-	this.context.font = this.fontStyle;
-		
-	this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
-	this.canvas.height = this.determineFontHeight("font: " + this.fontStyle  + ";")+ this.strokeThickness;// textDimensions.height;
-
-	this.context.fillStyle = this.fillStyle;
-	this.context.font = this.fontStyle;
-	
-    this.context.strokeStyle = this.strokeStyle;
-	this.context.lineWidth = this.strokeThickness;
-
-	this.context.textBaseline="top"; 
-
-    if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	
-	
-//	console.log("//")
-}
-
-PIXI.Text.prototype.updateTransform = function()
-{
-	if(this.dirty)
-	{
-		this.updateText();	
-		
-		// update the texture..
-		this.texture.baseTexture.width = this.canvas.width;
-		this.texture.baseTexture.height = this.canvas.height;
-		this.texture.frame.width = this.canvas.width;
-		this.texture.frame.height = this.canvas.height;
-		
-		PIXI.texturesToUpdate.push(this.texture.baseTexture);
-		this.dirty = false;
-	}
-	
-	PIXI.Sprite.prototype.updateTransform.call( this );
-}
-
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
-{
-	// build a little refference dictionary so if the font style has been used return a
-	// cached version...
-	var result = PIXI.Text.heightCache[fontStyle]
-	
-	if(!result)
-	{
-		var body = document.getElementsByTagName("body")[0];
-		var dummy = document.createElement("div");
-		var dummyText = document.createTextNode("M");
-		dummy.appendChild(dummyText);
-		dummy.setAttribute("style", fontStyle);
-		body.appendChild(dummy);
-		
-		result = dummy.offsetHeight;
-		PIXI.Text.heightCache[fontStyle] = result
-		
-		body.removeChild(dummy);
-	}
-	
-	return result;
-};
-
-PIXI.Text.prototype.destroy = function(destroyTexture)
-{
-	if(destroyTexture)
-	{
-		this.texture.destroy();
-	}
-		
-}
-
-PIXI.Text.heightCache = {};
-
-
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - diff --git a/docs/files/src_pixi_extras_Rope.js.html b/docs/files/src_pixi_extras_Rope.js.html index 7e2ceff..219f049 100644 --- a/docs/files/src_pixi_extras_Rope.js.html +++ b/docs/files/src_pixi_extras_Rope.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_Strip.js.html b/docs/files/src_pixi_extras_Strip.js.html index 8f748c2..a7a64cd 100644 --- a/docs/files/src_pixi_extras_Strip.js.html +++ b/docs/files/src_pixi_extras_Strip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_TilingSprite.js.html b/docs/files/src_pixi_extras_TilingSprite.js.html index af3d84d..b61c15f 100644 --- a/docs/files/src_pixi_extras_TilingSprite.js.html +++ b/docs/files/src_pixi_extras_TilingSprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_loaders_AssetLoader.js.html b/docs/files/src_pixi_loaders_AssetLoader.js.html index 089d5cf..594481e 100644 --- a/docs/files/src_pixi_loaders_AssetLoader.js.html +++ b/docs/files/src_pixi_loaders_AssetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -127,17 +133,17 @@ */ /** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -145,11 +151,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -169,105 +183,45 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; diff --git a/docs/files/src_pixi_loaders_BitmapFontLoader.js.html b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html new file mode 100644 index 0000000..6fd5d80 --- /dev/null +++ b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html @@ -0,0 +1,275 @@ + + + + + src/pixi/loaders/BitmapFontLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/BitmapFontLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The xml loader is used to load in XML bitmap font data ("xml" or "fnt")
+ * To generate the data you can use http://www.angelcode.com/products/bmfont/
+ * This loader will also load the image file as the data.
+ * When loaded this class will dispatch a "loaded" event
+ * @class BitmapFontLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url the url of the sprite sheet JSON file
+ * @param {Boolean} crossorigin
+ */
+
+PIXI.BitmapFontLoader = function(url, crossorigin)
+{
+    /*
+     * i use texture packer to load the assets..
+     * http://www.codeandweb.com/texturepacker
+     * make sure to set the format as "JSON"
+     */
+    PIXI.EventTarget.call(this);
+    this.url = url;
+    this.baseUrl = url.replace(/[^\/]*$/, "");
+    this.texture = null;
+    this.crossorigin = crossorigin;
+};
+
+// constructor
+PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader;
+
+/**
+ * This will begin loading the JSON file
+ */
+PIXI.BitmapFontLoader.prototype.load = function()
+{
+    this.ajaxRequest = new XMLHttpRequest();
+    var scope = this;
+    this.ajaxRequest.onreadystatechange = function()
+    {
+        scope.onXMLLoaded();
+    };
+
+    this.ajaxRequest.open("GET", this.url, true);
+    if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml");
+    this.ajaxRequest.send(null)
+};
+
+/**
+ * Invoked when XML file is loaded
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
+{
+    if (this.ajaxRequest.readyState == 4)
+    {
+        if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1)
+        {
+            var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue;
+            var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
+            this.texture = image.texture.baseTexture;
+
+            var data = {};
+            var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0];
+            var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0];
+            data.font = info.attributes.getNamedItem("face").nodeValue;
+            data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10);
+            data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10);
+            data.chars = {};
+
+            //parse letters
+            var letters = this.ajaxRequest.responseXML.getElementsByTagName("char");
+
+            for (var i = 0; i < letters.length; i++)
+            {
+                var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10);
+
+                var textureRect = {
+                    x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10),
+                    y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10),
+                    width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10),
+                    height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10)
+                };
+                PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect);
+
+                data.chars[charCode] = {
+                    xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10),
+                    yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10),
+                    xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10),
+                    kerning: {}
+                };
+            }
+
+            //parse kernings
+            var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning");
+            for (i = 0; i < kernings.length; i++)
+            {
+               var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10);
+               var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10);
+               var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10);
+
+                data.chars[second].kerning[first] = amount;
+
+            }
+            PIXI.BitmapText.fonts[data.font] = data;
+
+            var scope = this;
+            image.addEventListener("loaded", function() {
+                scope.onLoaded();
+            });
+            image.load();
+        }
+    }
+};
+
+/**
+ * Invoked when all files are loaded (xml/fnt and texture)
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_ImageLoader.js.html b/docs/files/src_pixi_loaders_ImageLoader.js.html new file mode 100644 index 0000000..f6fcf07 --- /dev/null +++ b/docs/files/src_pixi_loaders_ImageLoader.js.html @@ -0,0 +1,200 @@ + + + + + src/pixi/loaders/ImageLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/ImageLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif")
+ * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
+ * When loaded this class will dispatch a 'loaded' event
+ * @class ImageLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url The url of the image
+ * @param {Boolean} crossorigin
+ */
+PIXI.ImageLoader = function(url, crossorigin)
+{
+    PIXI.EventTarget.call(this);
+    this.texture = PIXI.Texture.fromImage(url, crossorigin);
+};
+
+// constructor
+PIXI.ImageLoader.constructor = PIXI.ImageLoader;
+
+/**
+ * Loads image or takes it from cache
+ */
+PIXI.ImageLoader.prototype.load = function()
+{
+    if(!this.texture.baseTexture.hasLoaded)
+    {
+        var scope = this;
+        this.texture.baseTexture.addEventListener("loaded", function()
+        {
+            scope.onLoaded();
+        });
+    }
+    else
+    {
+        this.onLoaded();
+    }
+};
+
+/**
+ * Invoked when image file is loaded or it is already cached and ready to use
+ * @private
+ */
+PIXI.ImageLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 5510866..3b14d2f 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,30 +136,31 @@ * The sprite sheet loader is used to load in JSON sprite sheet data * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event + * When loaded this class will dispatch a "loaded" event * @class SpriteSheetLoader * @extends EventTarget * @constructor - * @param url {String} the url of the sprite sheet JSON file + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin */ -PIXI.SpriteSheetLoader = function(url) +PIXI.SpriteSheetLoader = function(url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker * make sure to set the format as "JSON" */ - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; this.frames = {}; - this.crossorigin = false; -} + this.crossorigin = crossorigin; +}; // constructor PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; @@ -165,32 +172,38 @@ { this.ajaxRequest = new AjaxRequest(); var scope = this; - this.ajaxRequest.onreadystatechange=function() + this.ajaxRequest.onreadystatechange = function() { - scope.onLoaded(); - } + scope.onJSONLoaded(); + }; - this.ajaxRequest.open("GET", this.url, true) + this.ajaxRequest.open("GET", this.url, true); if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); this.ajaxRequest.send(null) -} +}; -PIXI.SpriteSheetLoader.prototype.onLoaded = function() +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() { - if (this.ajaxRequest.readyState==4) + if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) { var rect = frameData[i].frame; if (rect) @@ -201,32 +214,24 @@ { //var realSize = frameData[i].spriteSourceSize; PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + PIXI.TextureCache[i].trim.x = 0;// (realSize.x / rect.w) // calculate the offset! } - // this.frames[i] = ; } } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; diff --git a/docs/files/src_pixi_renderers_CanvasRenderer.js.html b/docs/files/src_pixi_renderers_CanvasRenderer.js.html index 5598bbd..0b91b46 100644 --- a/docs/files/src_pixi_renderers_CanvasRenderer.js.html +++ b/docs/files/src_pixi_renderers_CanvasRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Text.js.html b/docs/files/src_pixi_Text.js.html deleted file mode 100644 index 33b7cf2..0000000 --- a/docs/files/src_pixi_Text.js.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - src/pixi/Text.js - Pixi.JS - - - - - - - - -
    -
    -
    - -

    - -
    -
    - API Docs for: 1.0.0 -
    -
    -
    - -
    - -
    -
    -
    - Show: - - - - - - - -
    - - -
    -
    -
    -

    File: src/pixi/Text.js

    - -
    - 
    -/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * A Text Object will create a line of text
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.canvas = document.createElement("canvas");
-	
-	this.context = this.canvas.getContext("2d");
-	//document.body.appendChild(this.canvas);
-	this.setText(text);
-	this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
-	
-	this.updateText();
-	
-	PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
-	
-	// need to store a canvas that can
-}
-
-// constructor
-PIXI.Text.constructor = PIXI.Text;
-PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
-
-/**
- * Set the copy for the text object
- * @methos setText
- * @param text {String} The copy that you would like the text to display
- */
-PIXI.Text.prototype.setText = function(text)
-{
-	this.text = text || " ";
-	this.dirty = true;
-}
-
-/**
- * Set the style of the text
- * @method setStyle
- * @constructor
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.fontStyle = fontStyle || "bold 20pt Arial";
-	this.fillStyle = fillStyle;
-	this.strokeStyle = strokeStyle;
-	this.strokeThickness = strokeThickness || 0;
-	
-	this.dirty = true;
-}
-
-/**
- * @private
- */
-PIXI.Text.prototype.updateText = function()
-{
-//	console.log(this.text);
-	this.context.font = this.fontStyle;
-		
-	this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
-	this.canvas.height = this.determineFontHeight("font: " + this.fontStyle  + ";")+ this.strokeThickness;// textDimensions.height;
-
-	this.context.fillStyle = this.fillStyle;
-	this.context.font = this.fontStyle;
-	
-    this.context.strokeStyle = this.strokeStyle;
-	this.context.lineWidth = this.strokeThickness;
-
-	this.context.textBaseline="top"; 
-
-    if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	
-	
-//	console.log("//")
-}
-
-PIXI.Text.prototype.updateTransform = function()
-{
-	if(this.dirty)
-	{
-		this.updateText();	
-		
-		// update the texture..
-		this.texture.baseTexture.width = this.canvas.width;
-		this.texture.baseTexture.height = this.canvas.height;
-		this.texture.frame.width = this.canvas.width;
-		this.texture.frame.height = this.canvas.height;
-		
-		PIXI.texturesToUpdate.push(this.texture.baseTexture);
-		this.dirty = false;
-	}
-	
-	PIXI.Sprite.prototype.updateTransform.call( this );
-}
-
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
-{
-	// build a little refference dictionary so if the font style has been used return a
-	// cached version...
-	var result = PIXI.Text.heightCache[fontStyle]
-	
-	if(!result)
-	{
-		var body = document.getElementsByTagName("body")[0];
-		var dummy = document.createElement("div");
-		var dummyText = document.createTextNode("M");
-		dummy.appendChild(dummyText);
-		dummy.setAttribute("style", fontStyle);
-		body.appendChild(dummy);
-		
-		result = dummy.offsetHeight;
-		PIXI.Text.heightCache[fontStyle] = result
-		
-		body.removeChild(dummy);
-	}
-	
-	return result;
-};
-
-PIXI.Text.prototype.destroy = function(destroyTexture)
-{
-	if(destroyTexture)
-	{
-		this.texture.destroy();
-	}
-		
-}
-
-PIXI.Text.heightCache = {};
-
-
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - diff --git a/docs/files/src_pixi_extras_Rope.js.html b/docs/files/src_pixi_extras_Rope.js.html index 7e2ceff..219f049 100644 --- a/docs/files/src_pixi_extras_Rope.js.html +++ b/docs/files/src_pixi_extras_Rope.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_Strip.js.html b/docs/files/src_pixi_extras_Strip.js.html index 8f748c2..a7a64cd 100644 --- a/docs/files/src_pixi_extras_Strip.js.html +++ b/docs/files/src_pixi_extras_Strip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_TilingSprite.js.html b/docs/files/src_pixi_extras_TilingSprite.js.html index af3d84d..b61c15f 100644 --- a/docs/files/src_pixi_extras_TilingSprite.js.html +++ b/docs/files/src_pixi_extras_TilingSprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_loaders_AssetLoader.js.html b/docs/files/src_pixi_loaders_AssetLoader.js.html index 089d5cf..594481e 100644 --- a/docs/files/src_pixi_loaders_AssetLoader.js.html +++ b/docs/files/src_pixi_loaders_AssetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -127,17 +133,17 @@ */ /** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -145,11 +151,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -169,105 +183,45 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; diff --git a/docs/files/src_pixi_loaders_BitmapFontLoader.js.html b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html new file mode 100644 index 0000000..6fd5d80 --- /dev/null +++ b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html @@ -0,0 +1,275 @@ + + + + + src/pixi/loaders/BitmapFontLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/BitmapFontLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The xml loader is used to load in XML bitmap font data ("xml" or "fnt")
+ * To generate the data you can use http://www.angelcode.com/products/bmfont/
+ * This loader will also load the image file as the data.
+ * When loaded this class will dispatch a "loaded" event
+ * @class BitmapFontLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url the url of the sprite sheet JSON file
+ * @param {Boolean} crossorigin
+ */
+
+PIXI.BitmapFontLoader = function(url, crossorigin)
+{
+    /*
+     * i use texture packer to load the assets..
+     * http://www.codeandweb.com/texturepacker
+     * make sure to set the format as "JSON"
+     */
+    PIXI.EventTarget.call(this);
+    this.url = url;
+    this.baseUrl = url.replace(/[^\/]*$/, "");
+    this.texture = null;
+    this.crossorigin = crossorigin;
+};
+
+// constructor
+PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader;
+
+/**
+ * This will begin loading the JSON file
+ */
+PIXI.BitmapFontLoader.prototype.load = function()
+{
+    this.ajaxRequest = new XMLHttpRequest();
+    var scope = this;
+    this.ajaxRequest.onreadystatechange = function()
+    {
+        scope.onXMLLoaded();
+    };
+
+    this.ajaxRequest.open("GET", this.url, true);
+    if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml");
+    this.ajaxRequest.send(null)
+};
+
+/**
+ * Invoked when XML file is loaded
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
+{
+    if (this.ajaxRequest.readyState == 4)
+    {
+        if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1)
+        {
+            var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue;
+            var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
+            this.texture = image.texture.baseTexture;
+
+            var data = {};
+            var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0];
+            var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0];
+            data.font = info.attributes.getNamedItem("face").nodeValue;
+            data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10);
+            data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10);
+            data.chars = {};
+
+            //parse letters
+            var letters = this.ajaxRequest.responseXML.getElementsByTagName("char");
+
+            for (var i = 0; i < letters.length; i++)
+            {
+                var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10);
+
+                var textureRect = {
+                    x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10),
+                    y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10),
+                    width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10),
+                    height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10)
+                };
+                PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect);
+
+                data.chars[charCode] = {
+                    xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10),
+                    yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10),
+                    xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10),
+                    kerning: {}
+                };
+            }
+
+            //parse kernings
+            var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning");
+            for (i = 0; i < kernings.length; i++)
+            {
+               var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10);
+               var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10);
+               var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10);
+
+                data.chars[second].kerning[first] = amount;
+
+            }
+            PIXI.BitmapText.fonts[data.font] = data;
+
+            var scope = this;
+            image.addEventListener("loaded", function() {
+                scope.onLoaded();
+            });
+            image.load();
+        }
+    }
+};
+
+/**
+ * Invoked when all files are loaded (xml/fnt and texture)
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_ImageLoader.js.html b/docs/files/src_pixi_loaders_ImageLoader.js.html new file mode 100644 index 0000000..f6fcf07 --- /dev/null +++ b/docs/files/src_pixi_loaders_ImageLoader.js.html @@ -0,0 +1,200 @@ + + + + + src/pixi/loaders/ImageLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/ImageLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif")
+ * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
+ * When loaded this class will dispatch a 'loaded' event
+ * @class ImageLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url The url of the image
+ * @param {Boolean} crossorigin
+ */
+PIXI.ImageLoader = function(url, crossorigin)
+{
+    PIXI.EventTarget.call(this);
+    this.texture = PIXI.Texture.fromImage(url, crossorigin);
+};
+
+// constructor
+PIXI.ImageLoader.constructor = PIXI.ImageLoader;
+
+/**
+ * Loads image or takes it from cache
+ */
+PIXI.ImageLoader.prototype.load = function()
+{
+    if(!this.texture.baseTexture.hasLoaded)
+    {
+        var scope = this;
+        this.texture.baseTexture.addEventListener("loaded", function()
+        {
+            scope.onLoaded();
+        });
+    }
+    else
+    {
+        this.onLoaded();
+    }
+};
+
+/**
+ * Invoked when image file is loaded or it is already cached and ready to use
+ * @private
+ */
+PIXI.ImageLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 5510866..3b14d2f 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,30 +136,31 @@ * The sprite sheet loader is used to load in JSON sprite sheet data * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event + * When loaded this class will dispatch a "loaded" event * @class SpriteSheetLoader * @extends EventTarget * @constructor - * @param url {String} the url of the sprite sheet JSON file + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin */ -PIXI.SpriteSheetLoader = function(url) +PIXI.SpriteSheetLoader = function(url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker * make sure to set the format as "JSON" */ - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; this.frames = {}; - this.crossorigin = false; -} + this.crossorigin = crossorigin; +}; // constructor PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; @@ -165,32 +172,38 @@ { this.ajaxRequest = new AjaxRequest(); var scope = this; - this.ajaxRequest.onreadystatechange=function() + this.ajaxRequest.onreadystatechange = function() { - scope.onLoaded(); - } + scope.onJSONLoaded(); + }; - this.ajaxRequest.open("GET", this.url, true) + this.ajaxRequest.open("GET", this.url, true); if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); this.ajaxRequest.send(null) -} +}; -PIXI.SpriteSheetLoader.prototype.onLoaded = function() +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() { - if (this.ajaxRequest.readyState==4) + if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) { var rect = frameData[i].frame; if (rect) @@ -201,32 +214,24 @@ { //var realSize = frameData[i].spriteSourceSize; PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + PIXI.TextureCache[i].trim.x = 0;// (realSize.x / rect.w) // calculate the offset! } - // this.frames[i] = ; } } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; diff --git a/docs/files/src_pixi_renderers_CanvasRenderer.js.html b/docs/files/src_pixi_renderers_CanvasRenderer.js.html index 5598bbd..0b91b46 100644 --- a/docs/files/src_pixi_renderers_CanvasRenderer.js.html +++ b/docs/files/src_pixi_renderers_CanvasRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLBatch.js.html b/docs/files/src_pixi_renderers_WebGLBatch.js.html index 17824ca..95b86b5 100644 --- a/docs/files/src_pixi_renderers_WebGLBatch.js.html +++ b/docs/files/src_pixi_renderers_WebGLBatch.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Text.js.html b/docs/files/src_pixi_Text.js.html deleted file mode 100644 index 33b7cf2..0000000 --- a/docs/files/src_pixi_Text.js.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - src/pixi/Text.js - Pixi.JS - - - - - - - - -
    -
    -
    - -

    - -
    -
    - API Docs for: 1.0.0 -
    -
    -
    - -
    - -
    -
    -
    - Show: - - - - - - - -
    - - -
    -
    -
    -

    File: src/pixi/Text.js

    - -
    - 
    -/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * A Text Object will create a line of text
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.canvas = document.createElement("canvas");
-	
-	this.context = this.canvas.getContext("2d");
-	//document.body.appendChild(this.canvas);
-	this.setText(text);
-	this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
-	
-	this.updateText();
-	
-	PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
-	
-	// need to store a canvas that can
-}
-
-// constructor
-PIXI.Text.constructor = PIXI.Text;
-PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
-
-/**
- * Set the copy for the text object
- * @methos setText
- * @param text {String} The copy that you would like the text to display
- */
-PIXI.Text.prototype.setText = function(text)
-{
-	this.text = text || " ";
-	this.dirty = true;
-}
-
-/**
- * Set the style of the text
- * @method setStyle
- * @constructor
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.fontStyle = fontStyle || "bold 20pt Arial";
-	this.fillStyle = fillStyle;
-	this.strokeStyle = strokeStyle;
-	this.strokeThickness = strokeThickness || 0;
-	
-	this.dirty = true;
-}
-
-/**
- * @private
- */
-PIXI.Text.prototype.updateText = function()
-{
-//	console.log(this.text);
-	this.context.font = this.fontStyle;
-		
-	this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
-	this.canvas.height = this.determineFontHeight("font: " + this.fontStyle  + ";")+ this.strokeThickness;// textDimensions.height;
-
-	this.context.fillStyle = this.fillStyle;
-	this.context.font = this.fontStyle;
-	
-    this.context.strokeStyle = this.strokeStyle;
-	this.context.lineWidth = this.strokeThickness;
-
-	this.context.textBaseline="top"; 
-
-    if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	
-	
-//	console.log("//")
-}
-
-PIXI.Text.prototype.updateTransform = function()
-{
-	if(this.dirty)
-	{
-		this.updateText();	
-		
-		// update the texture..
-		this.texture.baseTexture.width = this.canvas.width;
-		this.texture.baseTexture.height = this.canvas.height;
-		this.texture.frame.width = this.canvas.width;
-		this.texture.frame.height = this.canvas.height;
-		
-		PIXI.texturesToUpdate.push(this.texture.baseTexture);
-		this.dirty = false;
-	}
-	
-	PIXI.Sprite.prototype.updateTransform.call( this );
-}
-
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
-{
-	// build a little refference dictionary so if the font style has been used return a
-	// cached version...
-	var result = PIXI.Text.heightCache[fontStyle]
-	
-	if(!result)
-	{
-		var body = document.getElementsByTagName("body")[0];
-		var dummy = document.createElement("div");
-		var dummyText = document.createTextNode("M");
-		dummy.appendChild(dummyText);
-		dummy.setAttribute("style", fontStyle);
-		body.appendChild(dummy);
-		
-		result = dummy.offsetHeight;
-		PIXI.Text.heightCache[fontStyle] = result
-		
-		body.removeChild(dummy);
-	}
-	
-	return result;
-};
-
-PIXI.Text.prototype.destroy = function(destroyTexture)
-{
-	if(destroyTexture)
-	{
-		this.texture.destroy();
-	}
-		
-}
-
-PIXI.Text.heightCache = {};
-
-
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - diff --git a/docs/files/src_pixi_extras_Rope.js.html b/docs/files/src_pixi_extras_Rope.js.html index 7e2ceff..219f049 100644 --- a/docs/files/src_pixi_extras_Rope.js.html +++ b/docs/files/src_pixi_extras_Rope.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_Strip.js.html b/docs/files/src_pixi_extras_Strip.js.html index 8f748c2..a7a64cd 100644 --- a/docs/files/src_pixi_extras_Strip.js.html +++ b/docs/files/src_pixi_extras_Strip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_TilingSprite.js.html b/docs/files/src_pixi_extras_TilingSprite.js.html index af3d84d..b61c15f 100644 --- a/docs/files/src_pixi_extras_TilingSprite.js.html +++ b/docs/files/src_pixi_extras_TilingSprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_loaders_AssetLoader.js.html b/docs/files/src_pixi_loaders_AssetLoader.js.html index 089d5cf..594481e 100644 --- a/docs/files/src_pixi_loaders_AssetLoader.js.html +++ b/docs/files/src_pixi_loaders_AssetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -127,17 +133,17 @@ */ /** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -145,11 +151,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -169,105 +183,45 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; diff --git a/docs/files/src_pixi_loaders_BitmapFontLoader.js.html b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html new file mode 100644 index 0000000..6fd5d80 --- /dev/null +++ b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html @@ -0,0 +1,275 @@ + + + + + src/pixi/loaders/BitmapFontLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/BitmapFontLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The xml loader is used to load in XML bitmap font data ("xml" or "fnt")
+ * To generate the data you can use http://www.angelcode.com/products/bmfont/
+ * This loader will also load the image file as the data.
+ * When loaded this class will dispatch a "loaded" event
+ * @class BitmapFontLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url the url of the sprite sheet JSON file
+ * @param {Boolean} crossorigin
+ */
+
+PIXI.BitmapFontLoader = function(url, crossorigin)
+{
+    /*
+     * i use texture packer to load the assets..
+     * http://www.codeandweb.com/texturepacker
+     * make sure to set the format as "JSON"
+     */
+    PIXI.EventTarget.call(this);
+    this.url = url;
+    this.baseUrl = url.replace(/[^\/]*$/, "");
+    this.texture = null;
+    this.crossorigin = crossorigin;
+};
+
+// constructor
+PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader;
+
+/**
+ * This will begin loading the JSON file
+ */
+PIXI.BitmapFontLoader.prototype.load = function()
+{
+    this.ajaxRequest = new XMLHttpRequest();
+    var scope = this;
+    this.ajaxRequest.onreadystatechange = function()
+    {
+        scope.onXMLLoaded();
+    };
+
+    this.ajaxRequest.open("GET", this.url, true);
+    if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml");
+    this.ajaxRequest.send(null)
+};
+
+/**
+ * Invoked when XML file is loaded
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
+{
+    if (this.ajaxRequest.readyState == 4)
+    {
+        if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1)
+        {
+            var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue;
+            var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
+            this.texture = image.texture.baseTexture;
+
+            var data = {};
+            var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0];
+            var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0];
+            data.font = info.attributes.getNamedItem("face").nodeValue;
+            data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10);
+            data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10);
+            data.chars = {};
+
+            //parse letters
+            var letters = this.ajaxRequest.responseXML.getElementsByTagName("char");
+
+            for (var i = 0; i < letters.length; i++)
+            {
+                var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10);
+
+                var textureRect = {
+                    x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10),
+                    y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10),
+                    width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10),
+                    height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10)
+                };
+                PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect);
+
+                data.chars[charCode] = {
+                    xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10),
+                    yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10),
+                    xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10),
+                    kerning: {}
+                };
+            }
+
+            //parse kernings
+            var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning");
+            for (i = 0; i < kernings.length; i++)
+            {
+               var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10);
+               var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10);
+               var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10);
+
+                data.chars[second].kerning[first] = amount;
+
+            }
+            PIXI.BitmapText.fonts[data.font] = data;
+
+            var scope = this;
+            image.addEventListener("loaded", function() {
+                scope.onLoaded();
+            });
+            image.load();
+        }
+    }
+};
+
+/**
+ * Invoked when all files are loaded (xml/fnt and texture)
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_ImageLoader.js.html b/docs/files/src_pixi_loaders_ImageLoader.js.html new file mode 100644 index 0000000..f6fcf07 --- /dev/null +++ b/docs/files/src_pixi_loaders_ImageLoader.js.html @@ -0,0 +1,200 @@ + + + + + src/pixi/loaders/ImageLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/ImageLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif")
+ * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
+ * When loaded this class will dispatch a 'loaded' event
+ * @class ImageLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url The url of the image
+ * @param {Boolean} crossorigin
+ */
+PIXI.ImageLoader = function(url, crossorigin)
+{
+    PIXI.EventTarget.call(this);
+    this.texture = PIXI.Texture.fromImage(url, crossorigin);
+};
+
+// constructor
+PIXI.ImageLoader.constructor = PIXI.ImageLoader;
+
+/**
+ * Loads image or takes it from cache
+ */
+PIXI.ImageLoader.prototype.load = function()
+{
+    if(!this.texture.baseTexture.hasLoaded)
+    {
+        var scope = this;
+        this.texture.baseTexture.addEventListener("loaded", function()
+        {
+            scope.onLoaded();
+        });
+    }
+    else
+    {
+        this.onLoaded();
+    }
+};
+
+/**
+ * Invoked when image file is loaded or it is already cached and ready to use
+ * @private
+ */
+PIXI.ImageLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 5510866..3b14d2f 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,30 +136,31 @@ * The sprite sheet loader is used to load in JSON sprite sheet data * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event + * When loaded this class will dispatch a "loaded" event * @class SpriteSheetLoader * @extends EventTarget * @constructor - * @param url {String} the url of the sprite sheet JSON file + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin */ -PIXI.SpriteSheetLoader = function(url) +PIXI.SpriteSheetLoader = function(url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker * make sure to set the format as "JSON" */ - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; this.frames = {}; - this.crossorigin = false; -} + this.crossorigin = crossorigin; +}; // constructor PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; @@ -165,32 +172,38 @@ { this.ajaxRequest = new AjaxRequest(); var scope = this; - this.ajaxRequest.onreadystatechange=function() + this.ajaxRequest.onreadystatechange = function() { - scope.onLoaded(); - } + scope.onJSONLoaded(); + }; - this.ajaxRequest.open("GET", this.url, true) + this.ajaxRequest.open("GET", this.url, true); if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); this.ajaxRequest.send(null) -} +}; -PIXI.SpriteSheetLoader.prototype.onLoaded = function() +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() { - if (this.ajaxRequest.readyState==4) + if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) { var rect = frameData[i].frame; if (rect) @@ -201,32 +214,24 @@ { //var realSize = frameData[i].spriteSourceSize; PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + PIXI.TextureCache[i].trim.x = 0;// (realSize.x / rect.w) // calculate the offset! } - // this.frames[i] = ; } } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; diff --git a/docs/files/src_pixi_renderers_CanvasRenderer.js.html b/docs/files/src_pixi_renderers_CanvasRenderer.js.html index 5598bbd..0b91b46 100644 --- a/docs/files/src_pixi_renderers_CanvasRenderer.js.html +++ b/docs/files/src_pixi_renderers_CanvasRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLBatch.js.html b/docs/files/src_pixi_renderers_WebGLBatch.js.html index 17824ca..95b86b5 100644 --- a/docs/files/src_pixi_renderers_WebGLBatch.js.html +++ b/docs/files/src_pixi_renderers_WebGLBatch.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 0a39149..af0ce9f 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Text.js.html b/docs/files/src_pixi_Text.js.html deleted file mode 100644 index 33b7cf2..0000000 --- a/docs/files/src_pixi_Text.js.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - src/pixi/Text.js - Pixi.JS - - - - - - - - -
    -
    -
    - -

    - -
    -
    - API Docs for: 1.0.0 -
    -
    -
    - -
    - -
    -
    -
    - Show: - - - - - - - -
    - - -
    -
    -
    -

    File: src/pixi/Text.js

    - -
    - 
    -/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * A Text Object will create a line of text
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.canvas = document.createElement("canvas");
-	
-	this.context = this.canvas.getContext("2d");
-	//document.body.appendChild(this.canvas);
-	this.setText(text);
-	this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
-	
-	this.updateText();
-	
-	PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
-	
-	// need to store a canvas that can
-}
-
-// constructor
-PIXI.Text.constructor = PIXI.Text;
-PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
-
-/**
- * Set the copy for the text object
- * @methos setText
- * @param text {String} The copy that you would like the text to display
- */
-PIXI.Text.prototype.setText = function(text)
-{
-	this.text = text || " ";
-	this.dirty = true;
-}
-
-/**
- * Set the style of the text
- * @method setStyle
- * @constructor
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.fontStyle = fontStyle || "bold 20pt Arial";
-	this.fillStyle = fillStyle;
-	this.strokeStyle = strokeStyle;
-	this.strokeThickness = strokeThickness || 0;
-	
-	this.dirty = true;
-}
-
-/**
- * @private
- */
-PIXI.Text.prototype.updateText = function()
-{
-//	console.log(this.text);
-	this.context.font = this.fontStyle;
-		
-	this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
-	this.canvas.height = this.determineFontHeight("font: " + this.fontStyle  + ";")+ this.strokeThickness;// textDimensions.height;
-
-	this.context.fillStyle = this.fillStyle;
-	this.context.font = this.fontStyle;
-	
-    this.context.strokeStyle = this.strokeStyle;
-	this.context.lineWidth = this.strokeThickness;
-
-	this.context.textBaseline="top"; 
-
-    if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	
-	
-//	console.log("//")
-}
-
-PIXI.Text.prototype.updateTransform = function()
-{
-	if(this.dirty)
-	{
-		this.updateText();	
-		
-		// update the texture..
-		this.texture.baseTexture.width = this.canvas.width;
-		this.texture.baseTexture.height = this.canvas.height;
-		this.texture.frame.width = this.canvas.width;
-		this.texture.frame.height = this.canvas.height;
-		
-		PIXI.texturesToUpdate.push(this.texture.baseTexture);
-		this.dirty = false;
-	}
-	
-	PIXI.Sprite.prototype.updateTransform.call( this );
-}
-
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
-{
-	// build a little refference dictionary so if the font style has been used return a
-	// cached version...
-	var result = PIXI.Text.heightCache[fontStyle]
-	
-	if(!result)
-	{
-		var body = document.getElementsByTagName("body")[0];
-		var dummy = document.createElement("div");
-		var dummyText = document.createTextNode("M");
-		dummy.appendChild(dummyText);
-		dummy.setAttribute("style", fontStyle);
-		body.appendChild(dummy);
-		
-		result = dummy.offsetHeight;
-		PIXI.Text.heightCache[fontStyle] = result
-		
-		body.removeChild(dummy);
-	}
-	
-	return result;
-};
-
-PIXI.Text.prototype.destroy = function(destroyTexture)
-{
-	if(destroyTexture)
-	{
-		this.texture.destroy();
-	}
-		
-}
-
-PIXI.Text.heightCache = {};
-
-
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - diff --git a/docs/files/src_pixi_extras_Rope.js.html b/docs/files/src_pixi_extras_Rope.js.html index 7e2ceff..219f049 100644 --- a/docs/files/src_pixi_extras_Rope.js.html +++ b/docs/files/src_pixi_extras_Rope.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_Strip.js.html b/docs/files/src_pixi_extras_Strip.js.html index 8f748c2..a7a64cd 100644 --- a/docs/files/src_pixi_extras_Strip.js.html +++ b/docs/files/src_pixi_extras_Strip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_TilingSprite.js.html b/docs/files/src_pixi_extras_TilingSprite.js.html index af3d84d..b61c15f 100644 --- a/docs/files/src_pixi_extras_TilingSprite.js.html +++ b/docs/files/src_pixi_extras_TilingSprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_loaders_AssetLoader.js.html b/docs/files/src_pixi_loaders_AssetLoader.js.html index 089d5cf..594481e 100644 --- a/docs/files/src_pixi_loaders_AssetLoader.js.html +++ b/docs/files/src_pixi_loaders_AssetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -127,17 +133,17 @@ */ /** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -145,11 +151,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -169,105 +183,45 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; diff --git a/docs/files/src_pixi_loaders_BitmapFontLoader.js.html b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html new file mode 100644 index 0000000..6fd5d80 --- /dev/null +++ b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html @@ -0,0 +1,275 @@ + + + + + src/pixi/loaders/BitmapFontLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/BitmapFontLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The xml loader is used to load in XML bitmap font data ("xml" or "fnt")
+ * To generate the data you can use http://www.angelcode.com/products/bmfont/
+ * This loader will also load the image file as the data.
+ * When loaded this class will dispatch a "loaded" event
+ * @class BitmapFontLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url the url of the sprite sheet JSON file
+ * @param {Boolean} crossorigin
+ */
+
+PIXI.BitmapFontLoader = function(url, crossorigin)
+{
+    /*
+     * i use texture packer to load the assets..
+     * http://www.codeandweb.com/texturepacker
+     * make sure to set the format as "JSON"
+     */
+    PIXI.EventTarget.call(this);
+    this.url = url;
+    this.baseUrl = url.replace(/[^\/]*$/, "");
+    this.texture = null;
+    this.crossorigin = crossorigin;
+};
+
+// constructor
+PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader;
+
+/**
+ * This will begin loading the JSON file
+ */
+PIXI.BitmapFontLoader.prototype.load = function()
+{
+    this.ajaxRequest = new XMLHttpRequest();
+    var scope = this;
+    this.ajaxRequest.onreadystatechange = function()
+    {
+        scope.onXMLLoaded();
+    };
+
+    this.ajaxRequest.open("GET", this.url, true);
+    if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml");
+    this.ajaxRequest.send(null)
+};
+
+/**
+ * Invoked when XML file is loaded
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
+{
+    if (this.ajaxRequest.readyState == 4)
+    {
+        if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1)
+        {
+            var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue;
+            var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
+            this.texture = image.texture.baseTexture;
+
+            var data = {};
+            var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0];
+            var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0];
+            data.font = info.attributes.getNamedItem("face").nodeValue;
+            data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10);
+            data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10);
+            data.chars = {};
+
+            //parse letters
+            var letters = this.ajaxRequest.responseXML.getElementsByTagName("char");
+
+            for (var i = 0; i < letters.length; i++)
+            {
+                var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10);
+
+                var textureRect = {
+                    x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10),
+                    y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10),
+                    width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10),
+                    height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10)
+                };
+                PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect);
+
+                data.chars[charCode] = {
+                    xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10),
+                    yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10),
+                    xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10),
+                    kerning: {}
+                };
+            }
+
+            //parse kernings
+            var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning");
+            for (i = 0; i < kernings.length; i++)
+            {
+               var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10);
+               var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10);
+               var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10);
+
+                data.chars[second].kerning[first] = amount;
+
+            }
+            PIXI.BitmapText.fonts[data.font] = data;
+
+            var scope = this;
+            image.addEventListener("loaded", function() {
+                scope.onLoaded();
+            });
+            image.load();
+        }
+    }
+};
+
+/**
+ * Invoked when all files are loaded (xml/fnt and texture)
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_ImageLoader.js.html b/docs/files/src_pixi_loaders_ImageLoader.js.html new file mode 100644 index 0000000..f6fcf07 --- /dev/null +++ b/docs/files/src_pixi_loaders_ImageLoader.js.html @@ -0,0 +1,200 @@ + + + + + src/pixi/loaders/ImageLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/ImageLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif")
+ * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
+ * When loaded this class will dispatch a 'loaded' event
+ * @class ImageLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url The url of the image
+ * @param {Boolean} crossorigin
+ */
+PIXI.ImageLoader = function(url, crossorigin)
+{
+    PIXI.EventTarget.call(this);
+    this.texture = PIXI.Texture.fromImage(url, crossorigin);
+};
+
+// constructor
+PIXI.ImageLoader.constructor = PIXI.ImageLoader;
+
+/**
+ * Loads image or takes it from cache
+ */
+PIXI.ImageLoader.prototype.load = function()
+{
+    if(!this.texture.baseTexture.hasLoaded)
+    {
+        var scope = this;
+        this.texture.baseTexture.addEventListener("loaded", function()
+        {
+            scope.onLoaded();
+        });
+    }
+    else
+    {
+        this.onLoaded();
+    }
+};
+
+/**
+ * Invoked when image file is loaded or it is already cached and ready to use
+ * @private
+ */
+PIXI.ImageLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 5510866..3b14d2f 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,30 +136,31 @@ * The sprite sheet loader is used to load in JSON sprite sheet data * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event + * When loaded this class will dispatch a "loaded" event * @class SpriteSheetLoader * @extends EventTarget * @constructor - * @param url {String} the url of the sprite sheet JSON file + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin */ -PIXI.SpriteSheetLoader = function(url) +PIXI.SpriteSheetLoader = function(url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker * make sure to set the format as "JSON" */ - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; this.frames = {}; - this.crossorigin = false; -} + this.crossorigin = crossorigin; +}; // constructor PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; @@ -165,32 +172,38 @@ { this.ajaxRequest = new AjaxRequest(); var scope = this; - this.ajaxRequest.onreadystatechange=function() + this.ajaxRequest.onreadystatechange = function() { - scope.onLoaded(); - } + scope.onJSONLoaded(); + }; - this.ajaxRequest.open("GET", this.url, true) + this.ajaxRequest.open("GET", this.url, true); if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); this.ajaxRequest.send(null) -} +}; -PIXI.SpriteSheetLoader.prototype.onLoaded = function() +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() { - if (this.ajaxRequest.readyState==4) + if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) { var rect = frameData[i].frame; if (rect) @@ -201,32 +214,24 @@ { //var realSize = frameData[i].spriteSourceSize; PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + PIXI.TextureCache[i].trim.x = 0;// (realSize.x / rect.w) // calculate the offset! } - // this.frames[i] = ; } } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; diff --git a/docs/files/src_pixi_renderers_CanvasRenderer.js.html b/docs/files/src_pixi_renderers_CanvasRenderer.js.html index 5598bbd..0b91b46 100644 --- a/docs/files/src_pixi_renderers_CanvasRenderer.js.html +++ b/docs/files/src_pixi_renderers_CanvasRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLBatch.js.html b/docs/files/src_pixi_renderers_WebGLBatch.js.html index 17824ca..95b86b5 100644 --- a/docs/files/src_pixi_renderers_WebGLBatch.js.html +++ b/docs/files/src_pixi_renderers_WebGLBatch.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 0a39149..af0ce9f 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLShaders.js.html b/docs/files/src_pixi_renderers_WebGLShaders.js.html index 40ac3bd..bb52ff9 100644 --- a/docs/files/src_pixi_renderers_WebGLShaders.js.html +++ b/docs/files/src_pixi_renderers_WebGLShaders.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Text.js.html b/docs/files/src_pixi_Text.js.html deleted file mode 100644 index 33b7cf2..0000000 --- a/docs/files/src_pixi_Text.js.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - src/pixi/Text.js - Pixi.JS - - - - - - - - -
    -
    -
    - -

    - -
    -
    - API Docs for: 1.0.0 -
    -
    -
    - -
    - -
    -
    -
    - Show: - - - - - - - -
    - - -
    -
    -
    -

    File: src/pixi/Text.js

    - -
    - 
    -/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * A Text Object will create a line of text
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.canvas = document.createElement("canvas");
-	
-	this.context = this.canvas.getContext("2d");
-	//document.body.appendChild(this.canvas);
-	this.setText(text);
-	this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
-	
-	this.updateText();
-	
-	PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
-	
-	// need to store a canvas that can
-}
-
-// constructor
-PIXI.Text.constructor = PIXI.Text;
-PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
-
-/**
- * Set the copy for the text object
- * @methos setText
- * @param text {String} The copy that you would like the text to display
- */
-PIXI.Text.prototype.setText = function(text)
-{
-	this.text = text || " ";
-	this.dirty = true;
-}
-
-/**
- * Set the style of the text
- * @method setStyle
- * @constructor
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.fontStyle = fontStyle || "bold 20pt Arial";
-	this.fillStyle = fillStyle;
-	this.strokeStyle = strokeStyle;
-	this.strokeThickness = strokeThickness || 0;
-	
-	this.dirty = true;
-}
-
-/**
- * @private
- */
-PIXI.Text.prototype.updateText = function()
-{
-//	console.log(this.text);
-	this.context.font = this.fontStyle;
-		
-	this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
-	this.canvas.height = this.determineFontHeight("font: " + this.fontStyle  + ";")+ this.strokeThickness;// textDimensions.height;
-
-	this.context.fillStyle = this.fillStyle;
-	this.context.font = this.fontStyle;
-	
-    this.context.strokeStyle = this.strokeStyle;
-	this.context.lineWidth = this.strokeThickness;
-
-	this.context.textBaseline="top"; 
-
-    if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	
-	
-//	console.log("//")
-}
-
-PIXI.Text.prototype.updateTransform = function()
-{
-	if(this.dirty)
-	{
-		this.updateText();	
-		
-		// update the texture..
-		this.texture.baseTexture.width = this.canvas.width;
-		this.texture.baseTexture.height = this.canvas.height;
-		this.texture.frame.width = this.canvas.width;
-		this.texture.frame.height = this.canvas.height;
-		
-		PIXI.texturesToUpdate.push(this.texture.baseTexture);
-		this.dirty = false;
-	}
-	
-	PIXI.Sprite.prototype.updateTransform.call( this );
-}
-
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
-{
-	// build a little refference dictionary so if the font style has been used return a
-	// cached version...
-	var result = PIXI.Text.heightCache[fontStyle]
-	
-	if(!result)
-	{
-		var body = document.getElementsByTagName("body")[0];
-		var dummy = document.createElement("div");
-		var dummyText = document.createTextNode("M");
-		dummy.appendChild(dummyText);
-		dummy.setAttribute("style", fontStyle);
-		body.appendChild(dummy);
-		
-		result = dummy.offsetHeight;
-		PIXI.Text.heightCache[fontStyle] = result
-		
-		body.removeChild(dummy);
-	}
-	
-	return result;
-};
-
-PIXI.Text.prototype.destroy = function(destroyTexture)
-{
-	if(destroyTexture)
-	{
-		this.texture.destroy();
-	}
-		
-}
-
-PIXI.Text.heightCache = {};
-
-
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - diff --git a/docs/files/src_pixi_extras_Rope.js.html b/docs/files/src_pixi_extras_Rope.js.html index 7e2ceff..219f049 100644 --- a/docs/files/src_pixi_extras_Rope.js.html +++ b/docs/files/src_pixi_extras_Rope.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_Strip.js.html b/docs/files/src_pixi_extras_Strip.js.html index 8f748c2..a7a64cd 100644 --- a/docs/files/src_pixi_extras_Strip.js.html +++ b/docs/files/src_pixi_extras_Strip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_TilingSprite.js.html b/docs/files/src_pixi_extras_TilingSprite.js.html index af3d84d..b61c15f 100644 --- a/docs/files/src_pixi_extras_TilingSprite.js.html +++ b/docs/files/src_pixi_extras_TilingSprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_loaders_AssetLoader.js.html b/docs/files/src_pixi_loaders_AssetLoader.js.html index 089d5cf..594481e 100644 --- a/docs/files/src_pixi_loaders_AssetLoader.js.html +++ b/docs/files/src_pixi_loaders_AssetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -127,17 +133,17 @@ */ /** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -145,11 +151,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -169,105 +183,45 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; diff --git a/docs/files/src_pixi_loaders_BitmapFontLoader.js.html b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html new file mode 100644 index 0000000..6fd5d80 --- /dev/null +++ b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html @@ -0,0 +1,275 @@ + + + + + src/pixi/loaders/BitmapFontLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/BitmapFontLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The xml loader is used to load in XML bitmap font data ("xml" or "fnt")
+ * To generate the data you can use http://www.angelcode.com/products/bmfont/
+ * This loader will also load the image file as the data.
+ * When loaded this class will dispatch a "loaded" event
+ * @class BitmapFontLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url the url of the sprite sheet JSON file
+ * @param {Boolean} crossorigin
+ */
+
+PIXI.BitmapFontLoader = function(url, crossorigin)
+{
+    /*
+     * i use texture packer to load the assets..
+     * http://www.codeandweb.com/texturepacker
+     * make sure to set the format as "JSON"
+     */
+    PIXI.EventTarget.call(this);
+    this.url = url;
+    this.baseUrl = url.replace(/[^\/]*$/, "");
+    this.texture = null;
+    this.crossorigin = crossorigin;
+};
+
+// constructor
+PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader;
+
+/**
+ * This will begin loading the JSON file
+ */
+PIXI.BitmapFontLoader.prototype.load = function()
+{
+    this.ajaxRequest = new XMLHttpRequest();
+    var scope = this;
+    this.ajaxRequest.onreadystatechange = function()
+    {
+        scope.onXMLLoaded();
+    };
+
+    this.ajaxRequest.open("GET", this.url, true);
+    if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml");
+    this.ajaxRequest.send(null)
+};
+
+/**
+ * Invoked when XML file is loaded
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
+{
+    if (this.ajaxRequest.readyState == 4)
+    {
+        if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1)
+        {
+            var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue;
+            var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
+            this.texture = image.texture.baseTexture;
+
+            var data = {};
+            var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0];
+            var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0];
+            data.font = info.attributes.getNamedItem("face").nodeValue;
+            data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10);
+            data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10);
+            data.chars = {};
+
+            //parse letters
+            var letters = this.ajaxRequest.responseXML.getElementsByTagName("char");
+
+            for (var i = 0; i < letters.length; i++)
+            {
+                var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10);
+
+                var textureRect = {
+                    x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10),
+                    y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10),
+                    width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10),
+                    height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10)
+                };
+                PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect);
+
+                data.chars[charCode] = {
+                    xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10),
+                    yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10),
+                    xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10),
+                    kerning: {}
+                };
+            }
+
+            //parse kernings
+            var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning");
+            for (i = 0; i < kernings.length; i++)
+            {
+               var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10);
+               var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10);
+               var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10);
+
+                data.chars[second].kerning[first] = amount;
+
+            }
+            PIXI.BitmapText.fonts[data.font] = data;
+
+            var scope = this;
+            image.addEventListener("loaded", function() {
+                scope.onLoaded();
+            });
+            image.load();
+        }
+    }
+};
+
+/**
+ * Invoked when all files are loaded (xml/fnt and texture)
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_ImageLoader.js.html b/docs/files/src_pixi_loaders_ImageLoader.js.html new file mode 100644 index 0000000..f6fcf07 --- /dev/null +++ b/docs/files/src_pixi_loaders_ImageLoader.js.html @@ -0,0 +1,200 @@ + + + + + src/pixi/loaders/ImageLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/ImageLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif")
+ * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
+ * When loaded this class will dispatch a 'loaded' event
+ * @class ImageLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url The url of the image
+ * @param {Boolean} crossorigin
+ */
+PIXI.ImageLoader = function(url, crossorigin)
+{
+    PIXI.EventTarget.call(this);
+    this.texture = PIXI.Texture.fromImage(url, crossorigin);
+};
+
+// constructor
+PIXI.ImageLoader.constructor = PIXI.ImageLoader;
+
+/**
+ * Loads image or takes it from cache
+ */
+PIXI.ImageLoader.prototype.load = function()
+{
+    if(!this.texture.baseTexture.hasLoaded)
+    {
+        var scope = this;
+        this.texture.baseTexture.addEventListener("loaded", function()
+        {
+            scope.onLoaded();
+        });
+    }
+    else
+    {
+        this.onLoaded();
+    }
+};
+
+/**
+ * Invoked when image file is loaded or it is already cached and ready to use
+ * @private
+ */
+PIXI.ImageLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 5510866..3b14d2f 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,30 +136,31 @@ * The sprite sheet loader is used to load in JSON sprite sheet data * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event + * When loaded this class will dispatch a "loaded" event * @class SpriteSheetLoader * @extends EventTarget * @constructor - * @param url {String} the url of the sprite sheet JSON file + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin */ -PIXI.SpriteSheetLoader = function(url) +PIXI.SpriteSheetLoader = function(url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker * make sure to set the format as "JSON" */ - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; this.frames = {}; - this.crossorigin = false; -} + this.crossorigin = crossorigin; +}; // constructor PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; @@ -165,32 +172,38 @@ { this.ajaxRequest = new AjaxRequest(); var scope = this; - this.ajaxRequest.onreadystatechange=function() + this.ajaxRequest.onreadystatechange = function() { - scope.onLoaded(); - } + scope.onJSONLoaded(); + }; - this.ajaxRequest.open("GET", this.url, true) + this.ajaxRequest.open("GET", this.url, true); if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); this.ajaxRequest.send(null) -} +}; -PIXI.SpriteSheetLoader.prototype.onLoaded = function() +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() { - if (this.ajaxRequest.readyState==4) + if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) { var rect = frameData[i].frame; if (rect) @@ -201,32 +214,24 @@ { //var realSize = frameData[i].spriteSourceSize; PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + PIXI.TextureCache[i].trim.x = 0;// (realSize.x / rect.w) // calculate the offset! } - // this.frames[i] = ; } } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; diff --git a/docs/files/src_pixi_renderers_CanvasRenderer.js.html b/docs/files/src_pixi_renderers_CanvasRenderer.js.html index 5598bbd..0b91b46 100644 --- a/docs/files/src_pixi_renderers_CanvasRenderer.js.html +++ b/docs/files/src_pixi_renderers_CanvasRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLBatch.js.html b/docs/files/src_pixi_renderers_WebGLBatch.js.html index 17824ca..95b86b5 100644 --- a/docs/files/src_pixi_renderers_WebGLBatch.js.html +++ b/docs/files/src_pixi_renderers_WebGLBatch.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 0a39149..af0ce9f 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLShaders.js.html b/docs/files/src_pixi_renderers_WebGLShaders.js.html index 40ac3bd..bb52ff9 100644 --- a/docs/files/src_pixi_renderers_WebGLShaders.js.html +++ b/docs/files/src_pixi_renderers_WebGLShaders.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_text_BitmapText.js.html b/docs/files/src_pixi_text_BitmapText.js.html new file mode 100644 index 0000000..9fdae27 --- /dev/null +++ b/docs/files/src_pixi_text_BitmapText.js.html @@ -0,0 +1,306 @@ + + + + + src/pixi/text/BitmapText.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/BitmapText.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text using bitmap font 
+ * You can generate the fnt files using 
+ * http://www.angelcode.com/products/bmfont/ for windows of
+ * http://www.bmglyph.com/ for mac.
+ * @class BitmapText
+ * @extends DisplayObjectContainer
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously)
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+ //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font
+PIXI.BitmapText = function(text, style)
+{
+    PIXI.DisplayObjectContainer.call(this);
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false
+
+};
+
+// constructor
+PIXI.BitmapText.constructor = PIXI.BitmapText;
+PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);
+
+/**
+ * Set the copy for the text object
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.BitmapText.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+PIXI.BitmapText.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.align = style.align || "left";
+    this.style = style;
+
+    var font = style.font.split(" ");
+    this.fontName = font[font.length - 1];
+    this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size;
+
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.BitmapText.prototype.updateText = function()
+{
+    var data = PIXI.BitmapText.fonts[this.fontName];
+    var pos = new PIXI.Point();
+    var prevCharCode = null;
+    var chars = [];
+    var maxLineWidth = 0;
+    var lineWidths = [];
+    var line = 0;
+    var scale = this.fontSize / data.size;
+    for(var i = 0; i < this.text.length; i++)
+    {
+        var charCode = this.text.charCodeAt(i);
+        if(charCode == "\n".charCodeAt(0))
+        {
+            lineWidths.push(pos.x);
+            maxLineWidth = Math.max(maxLineWidth, pos.x);
+            line++;
+
+            pos.x = 0;
+            pos.y += data.lineHeight;
+            prevCharCode = null;
+            continue;
+        }
+        
+        var charData = data.chars[charCode];
+        if(!charData) continue;
+
+        if(prevCharCode && charData[prevCharCode])
+        {
+           pos.x += charData.kerning[prevCharCode];
+        }
+        chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)});
+        pos.x += charData.xAdvance;
+
+        prevCharCode = charCode;
+    }
+
+    lineWidths.push(pos.x);
+    maxLineWidth = Math.max(maxLineWidth, pos.x);
+
+    var lineAlignOffsets = [];
+    for(i = 0; i <= line; i++)
+    {
+        var alignOffset = 0;
+        if(this.style.align == "right")
+        {
+            alignOffset = maxLineWidth - lineWidths[i];
+        }
+        else if(this.style.align == "center")
+        {
+            alignOffset = (maxLineWidth - lineWidths[i]) / 2;
+        }
+        lineAlignOffsets.push(alignOffset);
+    }
+
+    for(i = 0; i < chars.length; i++)
+    {
+        var char = PIXI.Sprite.fromFrame(chars[i].charCode);
+        char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale;
+        char.position.y = chars[i].position.y * scale;
+        char.scale.x = char.scale.y = scale;
+        this.addChild(char);
+    }
+
+    this.width = pos.x * scale;
+    this.height = (pos.y + data.lineHeight) * scale;
+};
+
+/**
+ * @private
+ */
+PIXI.BitmapText.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+        while(this.children.length > 0)
+        {
+            this.removeChild(this.getChildAt(0));
+        }
+        this.updateText();
+
+        this.dirty = false;
+	}
+	
+	PIXI.DisplayObjectContainer.prototype.updateTransform.call(this);
+};
+
+PIXI.BitmapText.fonts = {};
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Text.js.html b/docs/files/src_pixi_Text.js.html deleted file mode 100644 index 33b7cf2..0000000 --- a/docs/files/src_pixi_Text.js.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - src/pixi/Text.js - Pixi.JS - - - - - - - - -
    -
    -
    - -

    - -
    -
    - API Docs for: 1.0.0 -
    -
    -
    - -
    - -
    -
    -
    - Show: - - - - - - - -
    - - -
    -
    -
    -

    File: src/pixi/Text.js

    - -
    - 
    -/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * A Text Object will create a line of text
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.canvas = document.createElement("canvas");
-	
-	this.context = this.canvas.getContext("2d");
-	//document.body.appendChild(this.canvas);
-	this.setText(text);
-	this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
-	
-	this.updateText();
-	
-	PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
-	
-	// need to store a canvas that can
-}
-
-// constructor
-PIXI.Text.constructor = PIXI.Text;
-PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
-
-/**
- * Set the copy for the text object
- * @methos setText
- * @param text {String} The copy that you would like the text to display
- */
-PIXI.Text.prototype.setText = function(text)
-{
-	this.text = text || " ";
-	this.dirty = true;
-}
-
-/**
- * Set the style of the text
- * @method setStyle
- * @constructor
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.fontStyle = fontStyle || "bold 20pt Arial";
-	this.fillStyle = fillStyle;
-	this.strokeStyle = strokeStyle;
-	this.strokeThickness = strokeThickness || 0;
-	
-	this.dirty = true;
-}
-
-/**
- * @private
- */
-PIXI.Text.prototype.updateText = function()
-{
-//	console.log(this.text);
-	this.context.font = this.fontStyle;
-		
-	this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
-	this.canvas.height = this.determineFontHeight("font: " + this.fontStyle  + ";")+ this.strokeThickness;// textDimensions.height;
-
-	this.context.fillStyle = this.fillStyle;
-	this.context.font = this.fontStyle;
-	
-    this.context.strokeStyle = this.strokeStyle;
-	this.context.lineWidth = this.strokeThickness;
-
-	this.context.textBaseline="top"; 
-
-    if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	
-	
-//	console.log("//")
-}
-
-PIXI.Text.prototype.updateTransform = function()
-{
-	if(this.dirty)
-	{
-		this.updateText();	
-		
-		// update the texture..
-		this.texture.baseTexture.width = this.canvas.width;
-		this.texture.baseTexture.height = this.canvas.height;
-		this.texture.frame.width = this.canvas.width;
-		this.texture.frame.height = this.canvas.height;
-		
-		PIXI.texturesToUpdate.push(this.texture.baseTexture);
-		this.dirty = false;
-	}
-	
-	PIXI.Sprite.prototype.updateTransform.call( this );
-}
-
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
-{
-	// build a little refference dictionary so if the font style has been used return a
-	// cached version...
-	var result = PIXI.Text.heightCache[fontStyle]
-	
-	if(!result)
-	{
-		var body = document.getElementsByTagName("body")[0];
-		var dummy = document.createElement("div");
-		var dummyText = document.createTextNode("M");
-		dummy.appendChild(dummyText);
-		dummy.setAttribute("style", fontStyle);
-		body.appendChild(dummy);
-		
-		result = dummy.offsetHeight;
-		PIXI.Text.heightCache[fontStyle] = result
-		
-		body.removeChild(dummy);
-	}
-	
-	return result;
-};
-
-PIXI.Text.prototype.destroy = function(destroyTexture)
-{
-	if(destroyTexture)
-	{
-		this.texture.destroy();
-	}
-		
-}
-
-PIXI.Text.heightCache = {};
-
-
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - diff --git a/docs/files/src_pixi_extras_Rope.js.html b/docs/files/src_pixi_extras_Rope.js.html index 7e2ceff..219f049 100644 --- a/docs/files/src_pixi_extras_Rope.js.html +++ b/docs/files/src_pixi_extras_Rope.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_Strip.js.html b/docs/files/src_pixi_extras_Strip.js.html index 8f748c2..a7a64cd 100644 --- a/docs/files/src_pixi_extras_Strip.js.html +++ b/docs/files/src_pixi_extras_Strip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_TilingSprite.js.html b/docs/files/src_pixi_extras_TilingSprite.js.html index af3d84d..b61c15f 100644 --- a/docs/files/src_pixi_extras_TilingSprite.js.html +++ b/docs/files/src_pixi_extras_TilingSprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_loaders_AssetLoader.js.html b/docs/files/src_pixi_loaders_AssetLoader.js.html index 089d5cf..594481e 100644 --- a/docs/files/src_pixi_loaders_AssetLoader.js.html +++ b/docs/files/src_pixi_loaders_AssetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -127,17 +133,17 @@ */ /** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -145,11 +151,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -169,105 +183,45 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; diff --git a/docs/files/src_pixi_loaders_BitmapFontLoader.js.html b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html new file mode 100644 index 0000000..6fd5d80 --- /dev/null +++ b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html @@ -0,0 +1,275 @@ + + + + + src/pixi/loaders/BitmapFontLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/BitmapFontLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The xml loader is used to load in XML bitmap font data ("xml" or "fnt")
+ * To generate the data you can use http://www.angelcode.com/products/bmfont/
+ * This loader will also load the image file as the data.
+ * When loaded this class will dispatch a "loaded" event
+ * @class BitmapFontLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url the url of the sprite sheet JSON file
+ * @param {Boolean} crossorigin
+ */
+
+PIXI.BitmapFontLoader = function(url, crossorigin)
+{
+    /*
+     * i use texture packer to load the assets..
+     * http://www.codeandweb.com/texturepacker
+     * make sure to set the format as "JSON"
+     */
+    PIXI.EventTarget.call(this);
+    this.url = url;
+    this.baseUrl = url.replace(/[^\/]*$/, "");
+    this.texture = null;
+    this.crossorigin = crossorigin;
+};
+
+// constructor
+PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader;
+
+/**
+ * This will begin loading the JSON file
+ */
+PIXI.BitmapFontLoader.prototype.load = function()
+{
+    this.ajaxRequest = new XMLHttpRequest();
+    var scope = this;
+    this.ajaxRequest.onreadystatechange = function()
+    {
+        scope.onXMLLoaded();
+    };
+
+    this.ajaxRequest.open("GET", this.url, true);
+    if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml");
+    this.ajaxRequest.send(null)
+};
+
+/**
+ * Invoked when XML file is loaded
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
+{
+    if (this.ajaxRequest.readyState == 4)
+    {
+        if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1)
+        {
+            var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue;
+            var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
+            this.texture = image.texture.baseTexture;
+
+            var data = {};
+            var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0];
+            var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0];
+            data.font = info.attributes.getNamedItem("face").nodeValue;
+            data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10);
+            data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10);
+            data.chars = {};
+
+            //parse letters
+            var letters = this.ajaxRequest.responseXML.getElementsByTagName("char");
+
+            for (var i = 0; i < letters.length; i++)
+            {
+                var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10);
+
+                var textureRect = {
+                    x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10),
+                    y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10),
+                    width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10),
+                    height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10)
+                };
+                PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect);
+
+                data.chars[charCode] = {
+                    xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10),
+                    yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10),
+                    xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10),
+                    kerning: {}
+                };
+            }
+
+            //parse kernings
+            var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning");
+            for (i = 0; i < kernings.length; i++)
+            {
+               var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10);
+               var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10);
+               var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10);
+
+                data.chars[second].kerning[first] = amount;
+
+            }
+            PIXI.BitmapText.fonts[data.font] = data;
+
+            var scope = this;
+            image.addEventListener("loaded", function() {
+                scope.onLoaded();
+            });
+            image.load();
+        }
+    }
+};
+
+/**
+ * Invoked when all files are loaded (xml/fnt and texture)
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_ImageLoader.js.html b/docs/files/src_pixi_loaders_ImageLoader.js.html new file mode 100644 index 0000000..f6fcf07 --- /dev/null +++ b/docs/files/src_pixi_loaders_ImageLoader.js.html @@ -0,0 +1,200 @@ + + + + + src/pixi/loaders/ImageLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/ImageLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif")
+ * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
+ * When loaded this class will dispatch a 'loaded' event
+ * @class ImageLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url The url of the image
+ * @param {Boolean} crossorigin
+ */
+PIXI.ImageLoader = function(url, crossorigin)
+{
+    PIXI.EventTarget.call(this);
+    this.texture = PIXI.Texture.fromImage(url, crossorigin);
+};
+
+// constructor
+PIXI.ImageLoader.constructor = PIXI.ImageLoader;
+
+/**
+ * Loads image or takes it from cache
+ */
+PIXI.ImageLoader.prototype.load = function()
+{
+    if(!this.texture.baseTexture.hasLoaded)
+    {
+        var scope = this;
+        this.texture.baseTexture.addEventListener("loaded", function()
+        {
+            scope.onLoaded();
+        });
+    }
+    else
+    {
+        this.onLoaded();
+    }
+};
+
+/**
+ * Invoked when image file is loaded or it is already cached and ready to use
+ * @private
+ */
+PIXI.ImageLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 5510866..3b14d2f 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,30 +136,31 @@ * The sprite sheet loader is used to load in JSON sprite sheet data * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event + * When loaded this class will dispatch a "loaded" event * @class SpriteSheetLoader * @extends EventTarget * @constructor - * @param url {String} the url of the sprite sheet JSON file + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin */ -PIXI.SpriteSheetLoader = function(url) +PIXI.SpriteSheetLoader = function(url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker * make sure to set the format as "JSON" */ - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; this.frames = {}; - this.crossorigin = false; -} + this.crossorigin = crossorigin; +}; // constructor PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; @@ -165,32 +172,38 @@ { this.ajaxRequest = new AjaxRequest(); var scope = this; - this.ajaxRequest.onreadystatechange=function() + this.ajaxRequest.onreadystatechange = function() { - scope.onLoaded(); - } + scope.onJSONLoaded(); + }; - this.ajaxRequest.open("GET", this.url, true) + this.ajaxRequest.open("GET", this.url, true); if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); this.ajaxRequest.send(null) -} +}; -PIXI.SpriteSheetLoader.prototype.onLoaded = function() +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() { - if (this.ajaxRequest.readyState==4) + if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) { var rect = frameData[i].frame; if (rect) @@ -201,32 +214,24 @@ { //var realSize = frameData[i].spriteSourceSize; PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + PIXI.TextureCache[i].trim.x = 0;// (realSize.x / rect.w) // calculate the offset! } - // this.frames[i] = ; } } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; diff --git a/docs/files/src_pixi_renderers_CanvasRenderer.js.html b/docs/files/src_pixi_renderers_CanvasRenderer.js.html index 5598bbd..0b91b46 100644 --- a/docs/files/src_pixi_renderers_CanvasRenderer.js.html +++ b/docs/files/src_pixi_renderers_CanvasRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLBatch.js.html b/docs/files/src_pixi_renderers_WebGLBatch.js.html index 17824ca..95b86b5 100644 --- a/docs/files/src_pixi_renderers_WebGLBatch.js.html +++ b/docs/files/src_pixi_renderers_WebGLBatch.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 0a39149..af0ce9f 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLShaders.js.html b/docs/files/src_pixi_renderers_WebGLShaders.js.html index 40ac3bd..bb52ff9 100644 --- a/docs/files/src_pixi_renderers_WebGLShaders.js.html +++ b/docs/files/src_pixi_renderers_WebGLShaders.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_text_BitmapText.js.html b/docs/files/src_pixi_text_BitmapText.js.html new file mode 100644 index 0000000..9fdae27 --- /dev/null +++ b/docs/files/src_pixi_text_BitmapText.js.html @@ -0,0 +1,306 @@ + + + + + src/pixi/text/BitmapText.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/BitmapText.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text using bitmap font 
+ * You can generate the fnt files using 
+ * http://www.angelcode.com/products/bmfont/ for windows of
+ * http://www.bmglyph.com/ for mac.
+ * @class BitmapText
+ * @extends DisplayObjectContainer
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously)
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+ //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font
+PIXI.BitmapText = function(text, style)
+{
+    PIXI.DisplayObjectContainer.call(this);
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false
+
+};
+
+// constructor
+PIXI.BitmapText.constructor = PIXI.BitmapText;
+PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);
+
+/**
+ * Set the copy for the text object
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.BitmapText.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+PIXI.BitmapText.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.align = style.align || "left";
+    this.style = style;
+
+    var font = style.font.split(" ");
+    this.fontName = font[font.length - 1];
+    this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size;
+
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.BitmapText.prototype.updateText = function()
+{
+    var data = PIXI.BitmapText.fonts[this.fontName];
+    var pos = new PIXI.Point();
+    var prevCharCode = null;
+    var chars = [];
+    var maxLineWidth = 0;
+    var lineWidths = [];
+    var line = 0;
+    var scale = this.fontSize / data.size;
+    for(var i = 0; i < this.text.length; i++)
+    {
+        var charCode = this.text.charCodeAt(i);
+        if(charCode == "\n".charCodeAt(0))
+        {
+            lineWidths.push(pos.x);
+            maxLineWidth = Math.max(maxLineWidth, pos.x);
+            line++;
+
+            pos.x = 0;
+            pos.y += data.lineHeight;
+            prevCharCode = null;
+            continue;
+        }
+        
+        var charData = data.chars[charCode];
+        if(!charData) continue;
+
+        if(prevCharCode && charData[prevCharCode])
+        {
+           pos.x += charData.kerning[prevCharCode];
+        }
+        chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)});
+        pos.x += charData.xAdvance;
+
+        prevCharCode = charCode;
+    }
+
+    lineWidths.push(pos.x);
+    maxLineWidth = Math.max(maxLineWidth, pos.x);
+
+    var lineAlignOffsets = [];
+    for(i = 0; i <= line; i++)
+    {
+        var alignOffset = 0;
+        if(this.style.align == "right")
+        {
+            alignOffset = maxLineWidth - lineWidths[i];
+        }
+        else if(this.style.align == "center")
+        {
+            alignOffset = (maxLineWidth - lineWidths[i]) / 2;
+        }
+        lineAlignOffsets.push(alignOffset);
+    }
+
+    for(i = 0; i < chars.length; i++)
+    {
+        var char = PIXI.Sprite.fromFrame(chars[i].charCode);
+        char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale;
+        char.position.y = chars[i].position.y * scale;
+        char.scale.x = char.scale.y = scale;
+        this.addChild(char);
+    }
+
+    this.width = pos.x * scale;
+    this.height = (pos.y + data.lineHeight) * scale;
+};
+
+/**
+ * @private
+ */
+PIXI.BitmapText.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+        while(this.children.length > 0)
+        {
+            this.removeChild(this.getChildAt(0));
+        }
+        this.updateText();
+
+        this.dirty = false;
+	}
+	
+	PIXI.DisplayObjectContainer.prototype.updateTransform.call(this);
+};
+
+PIXI.BitmapText.fonts = {};
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_text_Text.js.html b/docs/files/src_pixi_text_Text.js.html new file mode 100644 index 0000000..7933074 --- /dev/null +++ b/docs/files/src_pixi_text_Text.js.html @@ -0,0 +1,344 @@ + + + + + src/pixi/text/Text.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/Text.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text to split a line you can use "\n"
+ * @class Text
+ * @extends Sprite
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text = function(text, style)
+{
+    this.canvas = document.createElement("canvas");
+    this.context = this.canvas.getContext("2d");
+    PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas));
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false;
+};
+
+// constructor
+PIXI.Text.constructor = PIXI.Text;
+PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype);
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font="bold 20pt Arial"] The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.font = style.font || "bold 20pt Arial";
+    style.fill = style.fill || "black";
+    style.align = style.align || "left";
+    style.strokeThickness = style.strokeThickness || 0;
+    this.style = style;
+    this.dirty = true;
+};
+
+/**
+ * Set the copy for the text object. To split a line you can use "\n"
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.Sprite.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.Text.prototype.updateText = function()
+{
+	this.context.font = this.style.font;
+
+	//split text into lines
+	var lines = this.text.split("\n");
+
+	//calculate text width
+	var lineWidths = [];
+	var maxLineWidth = 0;
+	for (var i = 0; i < lines.length; i++)
+	{
+		var lineWidth = this.context.measureText(lines[i]).width;
+		lineWidths[i] = lineWidth;
+		maxLineWidth = Math.max(maxLineWidth, lineWidth);
+	}
+	this.canvas.width = maxLineWidth + this.style.strokeThickness;
+	
+	//calculate text height
+	var lineHeight = this.determineFontHeight("font: " + this.style.font  + ";") + this.style.strokeThickness;
+	this.canvas.height = lineHeight * lines.length;
+
+	//set canvas text styles
+	this.context.fillStyle = this.style.fill;
+	this.context.font = this.style.font;
+	
+	this.context.strokeStyle = this.style.stroke;
+	this.context.lineWidth = this.style.strokeThickness;
+
+	this.context.textBaseline = "top";
+
+	//draw lines line by line
+	for (i = 0; i < lines.length; i++)
+	{
+		var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight);
+	
+		if(this.style.align == "right")
+		{
+			linePosition.x += maxLineWidth - lineWidths[i];
+		}
+		else if(this.style.align == "center")
+		{
+			linePosition.x += (maxLineWidth - lineWidths[i]) / 2;
+		}
+
+		if(this.style.stroke && this.style.strokeThickness)
+		{
+			this.context.strokeText(lines[i], linePosition.x, linePosition.y);
+		}
+
+		if(this.style.fill)
+		{
+			this.context.fillText(lines[i], linePosition.x, linePosition.y);
+		}
+	}
+	
+    this.updateTexture();
+};
+
+/**
+ * Updates texture size based on canvas size
+ * @private
+ */
+PIXI.Text.prototype.updateTexture = function()
+{
+
+    this.texture.baseTexture.width = this.canvas.width;
+    this.texture.baseTexture.height = this.canvas.height;
+    this.texture.frame.width = this.canvas.width;
+    this.texture.frame.height = this.canvas.height;
+    PIXI.texturesToUpdate.push(this.texture.baseTexture);
+};
+
+/**
+ * @private
+ */
+PIXI.Text.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+		this.updateText();	
+		this.dirty = false;
+	}
+	
+	PIXI.Sprite.prototype.updateTransform.call(this);
+};
+
+/*
+ * http://stackoverflow.com/users/34441/ellisbben
+ * great solution to the problem!
+ */
+PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
+{
+	// build a little reference dictionary so if the font style has been used return a
+	// cached version...
+	var result = PIXI.Text.heightCache[fontStyle];
+	
+	if(!result)
+	{
+		var body = document.getElementsByTagName("body")[0];
+		var dummy = document.createElement("div");
+		var dummyText = document.createTextNode("M");
+		dummy.appendChild(dummyText);
+		dummy.setAttribute("style", fontStyle);
+		body.appendChild(dummy);
+		
+		result = dummy.offsetHeight;
+		PIXI.Text.heightCache[fontStyle] = result;
+		
+		body.removeChild(dummy);
+	}
+	
+	return result;
+};
+
+PIXI.Text.prototype.destroy = function(destroyTexture)
+{
+	if(destroyTexture)
+	{
+		this.texture.destroy();
+	}
+		
+};
+
+PIXI.Text.heightCache = {};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Text.js.html b/docs/files/src_pixi_Text.js.html deleted file mode 100644 index 33b7cf2..0000000 --- a/docs/files/src_pixi_Text.js.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - src/pixi/Text.js - Pixi.JS - - - - - - - - -
    -
    -
    - -

    - -
    -
    - API Docs for: 1.0.0 -
    -
    -
    - -
    - -
    -
    -
    - Show: - - - - - - - -
    - - -
    -
    -
    -

    File: src/pixi/Text.js

    - -
    - 
    -/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * A Text Object will create a line of text
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.canvas = document.createElement("canvas");
-	
-	this.context = this.canvas.getContext("2d");
-	//document.body.appendChild(this.canvas);
-	this.setText(text);
-	this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
-	
-	this.updateText();
-	
-	PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
-	
-	// need to store a canvas that can
-}
-
-// constructor
-PIXI.Text.constructor = PIXI.Text;
-PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
-
-/**
- * Set the copy for the text object
- * @methos setText
- * @param text {String} The copy that you would like the text to display
- */
-PIXI.Text.prototype.setText = function(text)
-{
-	this.text = text || " ";
-	this.dirty = true;
-}
-
-/**
- * Set the style of the text
- * @method setStyle
- * @constructor
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.fontStyle = fontStyle || "bold 20pt Arial";
-	this.fillStyle = fillStyle;
-	this.strokeStyle = strokeStyle;
-	this.strokeThickness = strokeThickness || 0;
-	
-	this.dirty = true;
-}
-
-/**
- * @private
- */
-PIXI.Text.prototype.updateText = function()
-{
-//	console.log(this.text);
-	this.context.font = this.fontStyle;
-		
-	this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
-	this.canvas.height = this.determineFontHeight("font: " + this.fontStyle  + ";")+ this.strokeThickness;// textDimensions.height;
-
-	this.context.fillStyle = this.fillStyle;
-	this.context.font = this.fontStyle;
-	
-    this.context.strokeStyle = this.strokeStyle;
-	this.context.lineWidth = this.strokeThickness;
-
-	this.context.textBaseline="top"; 
-
-    if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	
-	
-//	console.log("//")
-}
-
-PIXI.Text.prototype.updateTransform = function()
-{
-	if(this.dirty)
-	{
-		this.updateText();	
-		
-		// update the texture..
-		this.texture.baseTexture.width = this.canvas.width;
-		this.texture.baseTexture.height = this.canvas.height;
-		this.texture.frame.width = this.canvas.width;
-		this.texture.frame.height = this.canvas.height;
-		
-		PIXI.texturesToUpdate.push(this.texture.baseTexture);
-		this.dirty = false;
-	}
-	
-	PIXI.Sprite.prototype.updateTransform.call( this );
-}
-
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
-{
-	// build a little refference dictionary so if the font style has been used return a
-	// cached version...
-	var result = PIXI.Text.heightCache[fontStyle]
-	
-	if(!result)
-	{
-		var body = document.getElementsByTagName("body")[0];
-		var dummy = document.createElement("div");
-		var dummyText = document.createTextNode("M");
-		dummy.appendChild(dummyText);
-		dummy.setAttribute("style", fontStyle);
-		body.appendChild(dummy);
-		
-		result = dummy.offsetHeight;
-		PIXI.Text.heightCache[fontStyle] = result
-		
-		body.removeChild(dummy);
-	}
-	
-	return result;
-};
-
-PIXI.Text.prototype.destroy = function(destroyTexture)
-{
-	if(destroyTexture)
-	{
-		this.texture.destroy();
-	}
-		
-}
-
-PIXI.Text.heightCache = {};
-
-
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - diff --git a/docs/files/src_pixi_extras_Rope.js.html b/docs/files/src_pixi_extras_Rope.js.html index 7e2ceff..219f049 100644 --- a/docs/files/src_pixi_extras_Rope.js.html +++ b/docs/files/src_pixi_extras_Rope.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_Strip.js.html b/docs/files/src_pixi_extras_Strip.js.html index 8f748c2..a7a64cd 100644 --- a/docs/files/src_pixi_extras_Strip.js.html +++ b/docs/files/src_pixi_extras_Strip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_TilingSprite.js.html b/docs/files/src_pixi_extras_TilingSprite.js.html index af3d84d..b61c15f 100644 --- a/docs/files/src_pixi_extras_TilingSprite.js.html +++ b/docs/files/src_pixi_extras_TilingSprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_loaders_AssetLoader.js.html b/docs/files/src_pixi_loaders_AssetLoader.js.html index 089d5cf..594481e 100644 --- a/docs/files/src_pixi_loaders_AssetLoader.js.html +++ b/docs/files/src_pixi_loaders_AssetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -127,17 +133,17 @@ */ /** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -145,11 +151,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -169,105 +183,45 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; diff --git a/docs/files/src_pixi_loaders_BitmapFontLoader.js.html b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html new file mode 100644 index 0000000..6fd5d80 --- /dev/null +++ b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html @@ -0,0 +1,275 @@ + + + + + src/pixi/loaders/BitmapFontLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/BitmapFontLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The xml loader is used to load in XML bitmap font data ("xml" or "fnt")
+ * To generate the data you can use http://www.angelcode.com/products/bmfont/
+ * This loader will also load the image file as the data.
+ * When loaded this class will dispatch a "loaded" event
+ * @class BitmapFontLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url the url of the sprite sheet JSON file
+ * @param {Boolean} crossorigin
+ */
+
+PIXI.BitmapFontLoader = function(url, crossorigin)
+{
+    /*
+     * i use texture packer to load the assets..
+     * http://www.codeandweb.com/texturepacker
+     * make sure to set the format as "JSON"
+     */
+    PIXI.EventTarget.call(this);
+    this.url = url;
+    this.baseUrl = url.replace(/[^\/]*$/, "");
+    this.texture = null;
+    this.crossorigin = crossorigin;
+};
+
+// constructor
+PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader;
+
+/**
+ * This will begin loading the JSON file
+ */
+PIXI.BitmapFontLoader.prototype.load = function()
+{
+    this.ajaxRequest = new XMLHttpRequest();
+    var scope = this;
+    this.ajaxRequest.onreadystatechange = function()
+    {
+        scope.onXMLLoaded();
+    };
+
+    this.ajaxRequest.open("GET", this.url, true);
+    if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml");
+    this.ajaxRequest.send(null)
+};
+
+/**
+ * Invoked when XML file is loaded
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
+{
+    if (this.ajaxRequest.readyState == 4)
+    {
+        if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1)
+        {
+            var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue;
+            var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
+            this.texture = image.texture.baseTexture;
+
+            var data = {};
+            var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0];
+            var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0];
+            data.font = info.attributes.getNamedItem("face").nodeValue;
+            data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10);
+            data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10);
+            data.chars = {};
+
+            //parse letters
+            var letters = this.ajaxRequest.responseXML.getElementsByTagName("char");
+
+            for (var i = 0; i < letters.length; i++)
+            {
+                var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10);
+
+                var textureRect = {
+                    x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10),
+                    y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10),
+                    width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10),
+                    height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10)
+                };
+                PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect);
+
+                data.chars[charCode] = {
+                    xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10),
+                    yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10),
+                    xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10),
+                    kerning: {}
+                };
+            }
+
+            //parse kernings
+            var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning");
+            for (i = 0; i < kernings.length; i++)
+            {
+               var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10);
+               var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10);
+               var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10);
+
+                data.chars[second].kerning[first] = amount;
+
+            }
+            PIXI.BitmapText.fonts[data.font] = data;
+
+            var scope = this;
+            image.addEventListener("loaded", function() {
+                scope.onLoaded();
+            });
+            image.load();
+        }
+    }
+};
+
+/**
+ * Invoked when all files are loaded (xml/fnt and texture)
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_ImageLoader.js.html b/docs/files/src_pixi_loaders_ImageLoader.js.html new file mode 100644 index 0000000..f6fcf07 --- /dev/null +++ b/docs/files/src_pixi_loaders_ImageLoader.js.html @@ -0,0 +1,200 @@ + + + + + src/pixi/loaders/ImageLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/ImageLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif")
+ * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
+ * When loaded this class will dispatch a 'loaded' event
+ * @class ImageLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url The url of the image
+ * @param {Boolean} crossorigin
+ */
+PIXI.ImageLoader = function(url, crossorigin)
+{
+    PIXI.EventTarget.call(this);
+    this.texture = PIXI.Texture.fromImage(url, crossorigin);
+};
+
+// constructor
+PIXI.ImageLoader.constructor = PIXI.ImageLoader;
+
+/**
+ * Loads image or takes it from cache
+ */
+PIXI.ImageLoader.prototype.load = function()
+{
+    if(!this.texture.baseTexture.hasLoaded)
+    {
+        var scope = this;
+        this.texture.baseTexture.addEventListener("loaded", function()
+        {
+            scope.onLoaded();
+        });
+    }
+    else
+    {
+        this.onLoaded();
+    }
+};
+
+/**
+ * Invoked when image file is loaded or it is already cached and ready to use
+ * @private
+ */
+PIXI.ImageLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 5510866..3b14d2f 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,30 +136,31 @@ * The sprite sheet loader is used to load in JSON sprite sheet data * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event + * When loaded this class will dispatch a "loaded" event * @class SpriteSheetLoader * @extends EventTarget * @constructor - * @param url {String} the url of the sprite sheet JSON file + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin */ -PIXI.SpriteSheetLoader = function(url) +PIXI.SpriteSheetLoader = function(url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker * make sure to set the format as "JSON" */ - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; this.frames = {}; - this.crossorigin = false; -} + this.crossorigin = crossorigin; +}; // constructor PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; @@ -165,32 +172,38 @@ { this.ajaxRequest = new AjaxRequest(); var scope = this; - this.ajaxRequest.onreadystatechange=function() + this.ajaxRequest.onreadystatechange = function() { - scope.onLoaded(); - } + scope.onJSONLoaded(); + }; - this.ajaxRequest.open("GET", this.url, true) + this.ajaxRequest.open("GET", this.url, true); if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); this.ajaxRequest.send(null) -} +}; -PIXI.SpriteSheetLoader.prototype.onLoaded = function() +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() { - if (this.ajaxRequest.readyState==4) + if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) { var rect = frameData[i].frame; if (rect) @@ -201,32 +214,24 @@ { //var realSize = frameData[i].spriteSourceSize; PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + PIXI.TextureCache[i].trim.x = 0;// (realSize.x / rect.w) // calculate the offset! } - // this.frames[i] = ; } } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; diff --git a/docs/files/src_pixi_renderers_CanvasRenderer.js.html b/docs/files/src_pixi_renderers_CanvasRenderer.js.html index 5598bbd..0b91b46 100644 --- a/docs/files/src_pixi_renderers_CanvasRenderer.js.html +++ b/docs/files/src_pixi_renderers_CanvasRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLBatch.js.html b/docs/files/src_pixi_renderers_WebGLBatch.js.html index 17824ca..95b86b5 100644 --- a/docs/files/src_pixi_renderers_WebGLBatch.js.html +++ b/docs/files/src_pixi_renderers_WebGLBatch.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 0a39149..af0ce9f 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLShaders.js.html b/docs/files/src_pixi_renderers_WebGLShaders.js.html index 40ac3bd..bb52ff9 100644 --- a/docs/files/src_pixi_renderers_WebGLShaders.js.html +++ b/docs/files/src_pixi_renderers_WebGLShaders.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_text_BitmapText.js.html b/docs/files/src_pixi_text_BitmapText.js.html new file mode 100644 index 0000000..9fdae27 --- /dev/null +++ b/docs/files/src_pixi_text_BitmapText.js.html @@ -0,0 +1,306 @@ + + + + + src/pixi/text/BitmapText.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/BitmapText.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text using bitmap font 
+ * You can generate the fnt files using 
+ * http://www.angelcode.com/products/bmfont/ for windows of
+ * http://www.bmglyph.com/ for mac.
+ * @class BitmapText
+ * @extends DisplayObjectContainer
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously)
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+ //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font
+PIXI.BitmapText = function(text, style)
+{
+    PIXI.DisplayObjectContainer.call(this);
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false
+
+};
+
+// constructor
+PIXI.BitmapText.constructor = PIXI.BitmapText;
+PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);
+
+/**
+ * Set the copy for the text object
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.BitmapText.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+PIXI.BitmapText.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.align = style.align || "left";
+    this.style = style;
+
+    var font = style.font.split(" ");
+    this.fontName = font[font.length - 1];
+    this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size;
+
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.BitmapText.prototype.updateText = function()
+{
+    var data = PIXI.BitmapText.fonts[this.fontName];
+    var pos = new PIXI.Point();
+    var prevCharCode = null;
+    var chars = [];
+    var maxLineWidth = 0;
+    var lineWidths = [];
+    var line = 0;
+    var scale = this.fontSize / data.size;
+    for(var i = 0; i < this.text.length; i++)
+    {
+        var charCode = this.text.charCodeAt(i);
+        if(charCode == "\n".charCodeAt(0))
+        {
+            lineWidths.push(pos.x);
+            maxLineWidth = Math.max(maxLineWidth, pos.x);
+            line++;
+
+            pos.x = 0;
+            pos.y += data.lineHeight;
+            prevCharCode = null;
+            continue;
+        }
+        
+        var charData = data.chars[charCode];
+        if(!charData) continue;
+
+        if(prevCharCode && charData[prevCharCode])
+        {
+           pos.x += charData.kerning[prevCharCode];
+        }
+        chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)});
+        pos.x += charData.xAdvance;
+
+        prevCharCode = charCode;
+    }
+
+    lineWidths.push(pos.x);
+    maxLineWidth = Math.max(maxLineWidth, pos.x);
+
+    var lineAlignOffsets = [];
+    for(i = 0; i <= line; i++)
+    {
+        var alignOffset = 0;
+        if(this.style.align == "right")
+        {
+            alignOffset = maxLineWidth - lineWidths[i];
+        }
+        else if(this.style.align == "center")
+        {
+            alignOffset = (maxLineWidth - lineWidths[i]) / 2;
+        }
+        lineAlignOffsets.push(alignOffset);
+    }
+
+    for(i = 0; i < chars.length; i++)
+    {
+        var char = PIXI.Sprite.fromFrame(chars[i].charCode);
+        char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale;
+        char.position.y = chars[i].position.y * scale;
+        char.scale.x = char.scale.y = scale;
+        this.addChild(char);
+    }
+
+    this.width = pos.x * scale;
+    this.height = (pos.y + data.lineHeight) * scale;
+};
+
+/**
+ * @private
+ */
+PIXI.BitmapText.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+        while(this.children.length > 0)
+        {
+            this.removeChild(this.getChildAt(0));
+        }
+        this.updateText();
+
+        this.dirty = false;
+	}
+	
+	PIXI.DisplayObjectContainer.prototype.updateTransform.call(this);
+};
+
+PIXI.BitmapText.fonts = {};
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_text_Text.js.html b/docs/files/src_pixi_text_Text.js.html new file mode 100644 index 0000000..7933074 --- /dev/null +++ b/docs/files/src_pixi_text_Text.js.html @@ -0,0 +1,344 @@ + + + + + src/pixi/text/Text.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/Text.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text to split a line you can use "\n"
+ * @class Text
+ * @extends Sprite
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text = function(text, style)
+{
+    this.canvas = document.createElement("canvas");
+    this.context = this.canvas.getContext("2d");
+    PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas));
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false;
+};
+
+// constructor
+PIXI.Text.constructor = PIXI.Text;
+PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype);
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font="bold 20pt Arial"] The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.font = style.font || "bold 20pt Arial";
+    style.fill = style.fill || "black";
+    style.align = style.align || "left";
+    style.strokeThickness = style.strokeThickness || 0;
+    this.style = style;
+    this.dirty = true;
+};
+
+/**
+ * Set the copy for the text object. To split a line you can use "\n"
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.Sprite.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.Text.prototype.updateText = function()
+{
+	this.context.font = this.style.font;
+
+	//split text into lines
+	var lines = this.text.split("\n");
+
+	//calculate text width
+	var lineWidths = [];
+	var maxLineWidth = 0;
+	for (var i = 0; i < lines.length; i++)
+	{
+		var lineWidth = this.context.measureText(lines[i]).width;
+		lineWidths[i] = lineWidth;
+		maxLineWidth = Math.max(maxLineWidth, lineWidth);
+	}
+	this.canvas.width = maxLineWidth + this.style.strokeThickness;
+	
+	//calculate text height
+	var lineHeight = this.determineFontHeight("font: " + this.style.font  + ";") + this.style.strokeThickness;
+	this.canvas.height = lineHeight * lines.length;
+
+	//set canvas text styles
+	this.context.fillStyle = this.style.fill;
+	this.context.font = this.style.font;
+	
+	this.context.strokeStyle = this.style.stroke;
+	this.context.lineWidth = this.style.strokeThickness;
+
+	this.context.textBaseline = "top";
+
+	//draw lines line by line
+	for (i = 0; i < lines.length; i++)
+	{
+		var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight);
+	
+		if(this.style.align == "right")
+		{
+			linePosition.x += maxLineWidth - lineWidths[i];
+		}
+		else if(this.style.align == "center")
+		{
+			linePosition.x += (maxLineWidth - lineWidths[i]) / 2;
+		}
+
+		if(this.style.stroke && this.style.strokeThickness)
+		{
+			this.context.strokeText(lines[i], linePosition.x, linePosition.y);
+		}
+
+		if(this.style.fill)
+		{
+			this.context.fillText(lines[i], linePosition.x, linePosition.y);
+		}
+	}
+	
+    this.updateTexture();
+};
+
+/**
+ * Updates texture size based on canvas size
+ * @private
+ */
+PIXI.Text.prototype.updateTexture = function()
+{
+
+    this.texture.baseTexture.width = this.canvas.width;
+    this.texture.baseTexture.height = this.canvas.height;
+    this.texture.frame.width = this.canvas.width;
+    this.texture.frame.height = this.canvas.height;
+    PIXI.texturesToUpdate.push(this.texture.baseTexture);
+};
+
+/**
+ * @private
+ */
+PIXI.Text.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+		this.updateText();	
+		this.dirty = false;
+	}
+	
+	PIXI.Sprite.prototype.updateTransform.call(this);
+};
+
+/*
+ * http://stackoverflow.com/users/34441/ellisbben
+ * great solution to the problem!
+ */
+PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
+{
+	// build a little reference dictionary so if the font style has been used return a
+	// cached version...
+	var result = PIXI.Text.heightCache[fontStyle];
+	
+	if(!result)
+	{
+		var body = document.getElementsByTagName("body")[0];
+		var dummy = document.createElement("div");
+		var dummyText = document.createTextNode("M");
+		dummy.appendChild(dummyText);
+		dummy.setAttribute("style", fontStyle);
+		body.appendChild(dummy);
+		
+		result = dummy.offsetHeight;
+		PIXI.Text.heightCache[fontStyle] = result;
+		
+		body.removeChild(dummy);
+	}
+	
+	return result;
+};
+
+PIXI.Text.prototype.destroy = function(destroyTexture)
+{
+	if(destroyTexture)
+	{
+		this.texture.destroy();
+	}
+		
+};
+
+PIXI.Text.heightCache = {};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_textures_BaseTexture.js.html b/docs/files/src_pixi_textures_BaseTexture.js.html index a7d8f96..31917f0 100644 --- a/docs/files/src_pixi_textures_BaseTexture.js.html +++ b/docs/files/src_pixi_textures_BaseTexture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Text.js.html b/docs/files/src_pixi_Text.js.html deleted file mode 100644 index 33b7cf2..0000000 --- a/docs/files/src_pixi_Text.js.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - src/pixi/Text.js - Pixi.JS - - - - - - - - -
    -
    -
    - -

    - -
    -
    - API Docs for: 1.0.0 -
    -
    -
    - -
    - -
    -
    -
    - Show: - - - - - - - -
    - - -
    -
    -
    -

    File: src/pixi/Text.js

    - -
    - 
    -/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * A Text Object will create a line of text
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.canvas = document.createElement("canvas");
-	
-	this.context = this.canvas.getContext("2d");
-	//document.body.appendChild(this.canvas);
-	this.setText(text);
-	this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
-	
-	this.updateText();
-	
-	PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
-	
-	// need to store a canvas that can
-}
-
-// constructor
-PIXI.Text.constructor = PIXI.Text;
-PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
-
-/**
- * Set the copy for the text object
- * @methos setText
- * @param text {String} The copy that you would like the text to display
- */
-PIXI.Text.prototype.setText = function(text)
-{
-	this.text = text || " ";
-	this.dirty = true;
-}
-
-/**
- * Set the style of the text
- * @method setStyle
- * @constructor
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.fontStyle = fontStyle || "bold 20pt Arial";
-	this.fillStyle = fillStyle;
-	this.strokeStyle = strokeStyle;
-	this.strokeThickness = strokeThickness || 0;
-	
-	this.dirty = true;
-}
-
-/**
- * @private
- */
-PIXI.Text.prototype.updateText = function()
-{
-//	console.log(this.text);
-	this.context.font = this.fontStyle;
-		
-	this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
-	this.canvas.height = this.determineFontHeight("font: " + this.fontStyle  + ";")+ this.strokeThickness;// textDimensions.height;
-
-	this.context.fillStyle = this.fillStyle;
-	this.context.font = this.fontStyle;
-	
-    this.context.strokeStyle = this.strokeStyle;
-	this.context.lineWidth = this.strokeThickness;
-
-	this.context.textBaseline="top"; 
-
-    if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	
-	
-//	console.log("//")
-}
-
-PIXI.Text.prototype.updateTransform = function()
-{
-	if(this.dirty)
-	{
-		this.updateText();	
-		
-		// update the texture..
-		this.texture.baseTexture.width = this.canvas.width;
-		this.texture.baseTexture.height = this.canvas.height;
-		this.texture.frame.width = this.canvas.width;
-		this.texture.frame.height = this.canvas.height;
-		
-		PIXI.texturesToUpdate.push(this.texture.baseTexture);
-		this.dirty = false;
-	}
-	
-	PIXI.Sprite.prototype.updateTransform.call( this );
-}
-
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
-{
-	// build a little refference dictionary so if the font style has been used return a
-	// cached version...
-	var result = PIXI.Text.heightCache[fontStyle]
-	
-	if(!result)
-	{
-		var body = document.getElementsByTagName("body")[0];
-		var dummy = document.createElement("div");
-		var dummyText = document.createTextNode("M");
-		dummy.appendChild(dummyText);
-		dummy.setAttribute("style", fontStyle);
-		body.appendChild(dummy);
-		
-		result = dummy.offsetHeight;
-		PIXI.Text.heightCache[fontStyle] = result
-		
-		body.removeChild(dummy);
-	}
-	
-	return result;
-};
-
-PIXI.Text.prototype.destroy = function(destroyTexture)
-{
-	if(destroyTexture)
-	{
-		this.texture.destroy();
-	}
-		
-}
-
-PIXI.Text.heightCache = {};
-
-
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - diff --git a/docs/files/src_pixi_extras_Rope.js.html b/docs/files/src_pixi_extras_Rope.js.html index 7e2ceff..219f049 100644 --- a/docs/files/src_pixi_extras_Rope.js.html +++ b/docs/files/src_pixi_extras_Rope.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_Strip.js.html b/docs/files/src_pixi_extras_Strip.js.html index 8f748c2..a7a64cd 100644 --- a/docs/files/src_pixi_extras_Strip.js.html +++ b/docs/files/src_pixi_extras_Strip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_TilingSprite.js.html b/docs/files/src_pixi_extras_TilingSprite.js.html index af3d84d..b61c15f 100644 --- a/docs/files/src_pixi_extras_TilingSprite.js.html +++ b/docs/files/src_pixi_extras_TilingSprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_loaders_AssetLoader.js.html b/docs/files/src_pixi_loaders_AssetLoader.js.html index 089d5cf..594481e 100644 --- a/docs/files/src_pixi_loaders_AssetLoader.js.html +++ b/docs/files/src_pixi_loaders_AssetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -127,17 +133,17 @@ */ /** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -145,11 +151,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -169,105 +183,45 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; diff --git a/docs/files/src_pixi_loaders_BitmapFontLoader.js.html b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html new file mode 100644 index 0000000..6fd5d80 --- /dev/null +++ b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html @@ -0,0 +1,275 @@ + + + + + src/pixi/loaders/BitmapFontLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/BitmapFontLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The xml loader is used to load in XML bitmap font data ("xml" or "fnt")
+ * To generate the data you can use http://www.angelcode.com/products/bmfont/
+ * This loader will also load the image file as the data.
+ * When loaded this class will dispatch a "loaded" event
+ * @class BitmapFontLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url the url of the sprite sheet JSON file
+ * @param {Boolean} crossorigin
+ */
+
+PIXI.BitmapFontLoader = function(url, crossorigin)
+{
+    /*
+     * i use texture packer to load the assets..
+     * http://www.codeandweb.com/texturepacker
+     * make sure to set the format as "JSON"
+     */
+    PIXI.EventTarget.call(this);
+    this.url = url;
+    this.baseUrl = url.replace(/[^\/]*$/, "");
+    this.texture = null;
+    this.crossorigin = crossorigin;
+};
+
+// constructor
+PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader;
+
+/**
+ * This will begin loading the JSON file
+ */
+PIXI.BitmapFontLoader.prototype.load = function()
+{
+    this.ajaxRequest = new XMLHttpRequest();
+    var scope = this;
+    this.ajaxRequest.onreadystatechange = function()
+    {
+        scope.onXMLLoaded();
+    };
+
+    this.ajaxRequest.open("GET", this.url, true);
+    if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml");
+    this.ajaxRequest.send(null)
+};
+
+/**
+ * Invoked when XML file is loaded
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
+{
+    if (this.ajaxRequest.readyState == 4)
+    {
+        if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1)
+        {
+            var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue;
+            var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
+            this.texture = image.texture.baseTexture;
+
+            var data = {};
+            var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0];
+            var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0];
+            data.font = info.attributes.getNamedItem("face").nodeValue;
+            data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10);
+            data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10);
+            data.chars = {};
+
+            //parse letters
+            var letters = this.ajaxRequest.responseXML.getElementsByTagName("char");
+
+            for (var i = 0; i < letters.length; i++)
+            {
+                var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10);
+
+                var textureRect = {
+                    x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10),
+                    y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10),
+                    width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10),
+                    height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10)
+                };
+                PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect);
+
+                data.chars[charCode] = {
+                    xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10),
+                    yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10),
+                    xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10),
+                    kerning: {}
+                };
+            }
+
+            //parse kernings
+            var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning");
+            for (i = 0; i < kernings.length; i++)
+            {
+               var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10);
+               var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10);
+               var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10);
+
+                data.chars[second].kerning[first] = amount;
+
+            }
+            PIXI.BitmapText.fonts[data.font] = data;
+
+            var scope = this;
+            image.addEventListener("loaded", function() {
+                scope.onLoaded();
+            });
+            image.load();
+        }
+    }
+};
+
+/**
+ * Invoked when all files are loaded (xml/fnt and texture)
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_ImageLoader.js.html b/docs/files/src_pixi_loaders_ImageLoader.js.html new file mode 100644 index 0000000..f6fcf07 --- /dev/null +++ b/docs/files/src_pixi_loaders_ImageLoader.js.html @@ -0,0 +1,200 @@ + + + + + src/pixi/loaders/ImageLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/ImageLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif")
+ * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
+ * When loaded this class will dispatch a 'loaded' event
+ * @class ImageLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url The url of the image
+ * @param {Boolean} crossorigin
+ */
+PIXI.ImageLoader = function(url, crossorigin)
+{
+    PIXI.EventTarget.call(this);
+    this.texture = PIXI.Texture.fromImage(url, crossorigin);
+};
+
+// constructor
+PIXI.ImageLoader.constructor = PIXI.ImageLoader;
+
+/**
+ * Loads image or takes it from cache
+ */
+PIXI.ImageLoader.prototype.load = function()
+{
+    if(!this.texture.baseTexture.hasLoaded)
+    {
+        var scope = this;
+        this.texture.baseTexture.addEventListener("loaded", function()
+        {
+            scope.onLoaded();
+        });
+    }
+    else
+    {
+        this.onLoaded();
+    }
+};
+
+/**
+ * Invoked when image file is loaded or it is already cached and ready to use
+ * @private
+ */
+PIXI.ImageLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 5510866..3b14d2f 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,30 +136,31 @@ * The sprite sheet loader is used to load in JSON sprite sheet data * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event + * When loaded this class will dispatch a "loaded" event * @class SpriteSheetLoader * @extends EventTarget * @constructor - * @param url {String} the url of the sprite sheet JSON file + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin */ -PIXI.SpriteSheetLoader = function(url) +PIXI.SpriteSheetLoader = function(url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker * make sure to set the format as "JSON" */ - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; this.frames = {}; - this.crossorigin = false; -} + this.crossorigin = crossorigin; +}; // constructor PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; @@ -165,32 +172,38 @@ { this.ajaxRequest = new AjaxRequest(); var scope = this; - this.ajaxRequest.onreadystatechange=function() + this.ajaxRequest.onreadystatechange = function() { - scope.onLoaded(); - } + scope.onJSONLoaded(); + }; - this.ajaxRequest.open("GET", this.url, true) + this.ajaxRequest.open("GET", this.url, true); if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); this.ajaxRequest.send(null) -} +}; -PIXI.SpriteSheetLoader.prototype.onLoaded = function() +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() { - if (this.ajaxRequest.readyState==4) + if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) { var rect = frameData[i].frame; if (rect) @@ -201,32 +214,24 @@ { //var realSize = frameData[i].spriteSourceSize; PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + PIXI.TextureCache[i].trim.x = 0;// (realSize.x / rect.w) // calculate the offset! } - // this.frames[i] = ; } } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; diff --git a/docs/files/src_pixi_renderers_CanvasRenderer.js.html b/docs/files/src_pixi_renderers_CanvasRenderer.js.html index 5598bbd..0b91b46 100644 --- a/docs/files/src_pixi_renderers_CanvasRenderer.js.html +++ b/docs/files/src_pixi_renderers_CanvasRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLBatch.js.html b/docs/files/src_pixi_renderers_WebGLBatch.js.html index 17824ca..95b86b5 100644 --- a/docs/files/src_pixi_renderers_WebGLBatch.js.html +++ b/docs/files/src_pixi_renderers_WebGLBatch.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 0a39149..af0ce9f 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLShaders.js.html b/docs/files/src_pixi_renderers_WebGLShaders.js.html index 40ac3bd..bb52ff9 100644 --- a/docs/files/src_pixi_renderers_WebGLShaders.js.html +++ b/docs/files/src_pixi_renderers_WebGLShaders.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_text_BitmapText.js.html b/docs/files/src_pixi_text_BitmapText.js.html new file mode 100644 index 0000000..9fdae27 --- /dev/null +++ b/docs/files/src_pixi_text_BitmapText.js.html @@ -0,0 +1,306 @@ + + + + + src/pixi/text/BitmapText.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/BitmapText.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text using bitmap font 
+ * You can generate the fnt files using 
+ * http://www.angelcode.com/products/bmfont/ for windows of
+ * http://www.bmglyph.com/ for mac.
+ * @class BitmapText
+ * @extends DisplayObjectContainer
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously)
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+ //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font
+PIXI.BitmapText = function(text, style)
+{
+    PIXI.DisplayObjectContainer.call(this);
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false
+
+};
+
+// constructor
+PIXI.BitmapText.constructor = PIXI.BitmapText;
+PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);
+
+/**
+ * Set the copy for the text object
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.BitmapText.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+PIXI.BitmapText.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.align = style.align || "left";
+    this.style = style;
+
+    var font = style.font.split(" ");
+    this.fontName = font[font.length - 1];
+    this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size;
+
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.BitmapText.prototype.updateText = function()
+{
+    var data = PIXI.BitmapText.fonts[this.fontName];
+    var pos = new PIXI.Point();
+    var prevCharCode = null;
+    var chars = [];
+    var maxLineWidth = 0;
+    var lineWidths = [];
+    var line = 0;
+    var scale = this.fontSize / data.size;
+    for(var i = 0; i < this.text.length; i++)
+    {
+        var charCode = this.text.charCodeAt(i);
+        if(charCode == "\n".charCodeAt(0))
+        {
+            lineWidths.push(pos.x);
+            maxLineWidth = Math.max(maxLineWidth, pos.x);
+            line++;
+
+            pos.x = 0;
+            pos.y += data.lineHeight;
+            prevCharCode = null;
+            continue;
+        }
+        
+        var charData = data.chars[charCode];
+        if(!charData) continue;
+
+        if(prevCharCode && charData[prevCharCode])
+        {
+           pos.x += charData.kerning[prevCharCode];
+        }
+        chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)});
+        pos.x += charData.xAdvance;
+
+        prevCharCode = charCode;
+    }
+
+    lineWidths.push(pos.x);
+    maxLineWidth = Math.max(maxLineWidth, pos.x);
+
+    var lineAlignOffsets = [];
+    for(i = 0; i <= line; i++)
+    {
+        var alignOffset = 0;
+        if(this.style.align == "right")
+        {
+            alignOffset = maxLineWidth - lineWidths[i];
+        }
+        else if(this.style.align == "center")
+        {
+            alignOffset = (maxLineWidth - lineWidths[i]) / 2;
+        }
+        lineAlignOffsets.push(alignOffset);
+    }
+
+    for(i = 0; i < chars.length; i++)
+    {
+        var char = PIXI.Sprite.fromFrame(chars[i].charCode);
+        char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale;
+        char.position.y = chars[i].position.y * scale;
+        char.scale.x = char.scale.y = scale;
+        this.addChild(char);
+    }
+
+    this.width = pos.x * scale;
+    this.height = (pos.y + data.lineHeight) * scale;
+};
+
+/**
+ * @private
+ */
+PIXI.BitmapText.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+        while(this.children.length > 0)
+        {
+            this.removeChild(this.getChildAt(0));
+        }
+        this.updateText();
+
+        this.dirty = false;
+	}
+	
+	PIXI.DisplayObjectContainer.prototype.updateTransform.call(this);
+};
+
+PIXI.BitmapText.fonts = {};
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_text_Text.js.html b/docs/files/src_pixi_text_Text.js.html new file mode 100644 index 0000000..7933074 --- /dev/null +++ b/docs/files/src_pixi_text_Text.js.html @@ -0,0 +1,344 @@ + + + + + src/pixi/text/Text.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/Text.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text to split a line you can use "\n"
+ * @class Text
+ * @extends Sprite
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text = function(text, style)
+{
+    this.canvas = document.createElement("canvas");
+    this.context = this.canvas.getContext("2d");
+    PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas));
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false;
+};
+
+// constructor
+PIXI.Text.constructor = PIXI.Text;
+PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype);
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font="bold 20pt Arial"] The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.font = style.font || "bold 20pt Arial";
+    style.fill = style.fill || "black";
+    style.align = style.align || "left";
+    style.strokeThickness = style.strokeThickness || 0;
+    this.style = style;
+    this.dirty = true;
+};
+
+/**
+ * Set the copy for the text object. To split a line you can use "\n"
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.Sprite.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.Text.prototype.updateText = function()
+{
+	this.context.font = this.style.font;
+
+	//split text into lines
+	var lines = this.text.split("\n");
+
+	//calculate text width
+	var lineWidths = [];
+	var maxLineWidth = 0;
+	for (var i = 0; i < lines.length; i++)
+	{
+		var lineWidth = this.context.measureText(lines[i]).width;
+		lineWidths[i] = lineWidth;
+		maxLineWidth = Math.max(maxLineWidth, lineWidth);
+	}
+	this.canvas.width = maxLineWidth + this.style.strokeThickness;
+	
+	//calculate text height
+	var lineHeight = this.determineFontHeight("font: " + this.style.font  + ";") + this.style.strokeThickness;
+	this.canvas.height = lineHeight * lines.length;
+
+	//set canvas text styles
+	this.context.fillStyle = this.style.fill;
+	this.context.font = this.style.font;
+	
+	this.context.strokeStyle = this.style.stroke;
+	this.context.lineWidth = this.style.strokeThickness;
+
+	this.context.textBaseline = "top";
+
+	//draw lines line by line
+	for (i = 0; i < lines.length; i++)
+	{
+		var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight);
+	
+		if(this.style.align == "right")
+		{
+			linePosition.x += maxLineWidth - lineWidths[i];
+		}
+		else if(this.style.align == "center")
+		{
+			linePosition.x += (maxLineWidth - lineWidths[i]) / 2;
+		}
+
+		if(this.style.stroke && this.style.strokeThickness)
+		{
+			this.context.strokeText(lines[i], linePosition.x, linePosition.y);
+		}
+
+		if(this.style.fill)
+		{
+			this.context.fillText(lines[i], linePosition.x, linePosition.y);
+		}
+	}
+	
+    this.updateTexture();
+};
+
+/**
+ * Updates texture size based on canvas size
+ * @private
+ */
+PIXI.Text.prototype.updateTexture = function()
+{
+
+    this.texture.baseTexture.width = this.canvas.width;
+    this.texture.baseTexture.height = this.canvas.height;
+    this.texture.frame.width = this.canvas.width;
+    this.texture.frame.height = this.canvas.height;
+    PIXI.texturesToUpdate.push(this.texture.baseTexture);
+};
+
+/**
+ * @private
+ */
+PIXI.Text.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+		this.updateText();	
+		this.dirty = false;
+	}
+	
+	PIXI.Sprite.prototype.updateTransform.call(this);
+};
+
+/*
+ * http://stackoverflow.com/users/34441/ellisbben
+ * great solution to the problem!
+ */
+PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
+{
+	// build a little reference dictionary so if the font style has been used return a
+	// cached version...
+	var result = PIXI.Text.heightCache[fontStyle];
+	
+	if(!result)
+	{
+		var body = document.getElementsByTagName("body")[0];
+		var dummy = document.createElement("div");
+		var dummyText = document.createTextNode("M");
+		dummy.appendChild(dummyText);
+		dummy.setAttribute("style", fontStyle);
+		body.appendChild(dummy);
+		
+		result = dummy.offsetHeight;
+		PIXI.Text.heightCache[fontStyle] = result;
+		
+		body.removeChild(dummy);
+	}
+	
+	return result;
+};
+
+PIXI.Text.prototype.destroy = function(destroyTexture)
+{
+	if(destroyTexture)
+	{
+		this.texture.destroy();
+	}
+		
+};
+
+PIXI.Text.heightCache = {};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_textures_BaseTexture.js.html b/docs/files/src_pixi_textures_BaseTexture.js.html index a7d8f96..31917f0 100644 --- a/docs/files/src_pixi_textures_BaseTexture.js.html +++ b/docs/files/src_pixi_textures_BaseTexture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_textures_Texture.js.html b/docs/files/src_pixi_textures_Texture.js.html index 35f12dc..ca52cac 100644 --- a/docs/files/src_pixi_textures_Texture.js.html +++ b/docs/files/src_pixi_textures_Texture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Text.js.html b/docs/files/src_pixi_Text.js.html deleted file mode 100644 index 33b7cf2..0000000 --- a/docs/files/src_pixi_Text.js.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - src/pixi/Text.js - Pixi.JS - - - - - - - - -
    -
    -
    - -

    - -
    -
    - API Docs for: 1.0.0 -
    -
    -
    - -
    - -
    -
    -
    - Show: - - - - - - - -
    - - -
    -
    -
    -

    File: src/pixi/Text.js

    - -
    - 
    -/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * A Text Object will create a line of text
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.canvas = document.createElement("canvas");
-	
-	this.context = this.canvas.getContext("2d");
-	//document.body.appendChild(this.canvas);
-	this.setText(text);
-	this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
-	
-	this.updateText();
-	
-	PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
-	
-	// need to store a canvas that can
-}
-
-// constructor
-PIXI.Text.constructor = PIXI.Text;
-PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
-
-/**
- * Set the copy for the text object
- * @methos setText
- * @param text {String} The copy that you would like the text to display
- */
-PIXI.Text.prototype.setText = function(text)
-{
-	this.text = text || " ";
-	this.dirty = true;
-}
-
-/**
- * Set the style of the text
- * @method setStyle
- * @constructor
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.fontStyle = fontStyle || "bold 20pt Arial";
-	this.fillStyle = fillStyle;
-	this.strokeStyle = strokeStyle;
-	this.strokeThickness = strokeThickness || 0;
-	
-	this.dirty = true;
-}
-
-/**
- * @private
- */
-PIXI.Text.prototype.updateText = function()
-{
-//	console.log(this.text);
-	this.context.font = this.fontStyle;
-		
-	this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
-	this.canvas.height = this.determineFontHeight("font: " + this.fontStyle  + ";")+ this.strokeThickness;// textDimensions.height;
-
-	this.context.fillStyle = this.fillStyle;
-	this.context.font = this.fontStyle;
-	
-    this.context.strokeStyle = this.strokeStyle;
-	this.context.lineWidth = this.strokeThickness;
-
-	this.context.textBaseline="top"; 
-
-    if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	
-	
-//	console.log("//")
-}
-
-PIXI.Text.prototype.updateTransform = function()
-{
-	if(this.dirty)
-	{
-		this.updateText();	
-		
-		// update the texture..
-		this.texture.baseTexture.width = this.canvas.width;
-		this.texture.baseTexture.height = this.canvas.height;
-		this.texture.frame.width = this.canvas.width;
-		this.texture.frame.height = this.canvas.height;
-		
-		PIXI.texturesToUpdate.push(this.texture.baseTexture);
-		this.dirty = false;
-	}
-	
-	PIXI.Sprite.prototype.updateTransform.call( this );
-}
-
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
-{
-	// build a little refference dictionary so if the font style has been used return a
-	// cached version...
-	var result = PIXI.Text.heightCache[fontStyle]
-	
-	if(!result)
-	{
-		var body = document.getElementsByTagName("body")[0];
-		var dummy = document.createElement("div");
-		var dummyText = document.createTextNode("M");
-		dummy.appendChild(dummyText);
-		dummy.setAttribute("style", fontStyle);
-		body.appendChild(dummy);
-		
-		result = dummy.offsetHeight;
-		PIXI.Text.heightCache[fontStyle] = result
-		
-		body.removeChild(dummy);
-	}
-	
-	return result;
-};
-
-PIXI.Text.prototype.destroy = function(destroyTexture)
-{
-	if(destroyTexture)
-	{
-		this.texture.destroy();
-	}
-		
-}
-
-PIXI.Text.heightCache = {};
-
-
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - diff --git a/docs/files/src_pixi_extras_Rope.js.html b/docs/files/src_pixi_extras_Rope.js.html index 7e2ceff..219f049 100644 --- a/docs/files/src_pixi_extras_Rope.js.html +++ b/docs/files/src_pixi_extras_Rope.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_Strip.js.html b/docs/files/src_pixi_extras_Strip.js.html index 8f748c2..a7a64cd 100644 --- a/docs/files/src_pixi_extras_Strip.js.html +++ b/docs/files/src_pixi_extras_Strip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_TilingSprite.js.html b/docs/files/src_pixi_extras_TilingSprite.js.html index af3d84d..b61c15f 100644 --- a/docs/files/src_pixi_extras_TilingSprite.js.html +++ b/docs/files/src_pixi_extras_TilingSprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_loaders_AssetLoader.js.html b/docs/files/src_pixi_loaders_AssetLoader.js.html index 089d5cf..594481e 100644 --- a/docs/files/src_pixi_loaders_AssetLoader.js.html +++ b/docs/files/src_pixi_loaders_AssetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -127,17 +133,17 @@ */ /** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -145,11 +151,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -169,105 +183,45 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; diff --git a/docs/files/src_pixi_loaders_BitmapFontLoader.js.html b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html new file mode 100644 index 0000000..6fd5d80 --- /dev/null +++ b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html @@ -0,0 +1,275 @@ + + + + + src/pixi/loaders/BitmapFontLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/BitmapFontLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The xml loader is used to load in XML bitmap font data ("xml" or "fnt")
+ * To generate the data you can use http://www.angelcode.com/products/bmfont/
+ * This loader will also load the image file as the data.
+ * When loaded this class will dispatch a "loaded" event
+ * @class BitmapFontLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url the url of the sprite sheet JSON file
+ * @param {Boolean} crossorigin
+ */
+
+PIXI.BitmapFontLoader = function(url, crossorigin)
+{
+    /*
+     * i use texture packer to load the assets..
+     * http://www.codeandweb.com/texturepacker
+     * make sure to set the format as "JSON"
+     */
+    PIXI.EventTarget.call(this);
+    this.url = url;
+    this.baseUrl = url.replace(/[^\/]*$/, "");
+    this.texture = null;
+    this.crossorigin = crossorigin;
+};
+
+// constructor
+PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader;
+
+/**
+ * This will begin loading the JSON file
+ */
+PIXI.BitmapFontLoader.prototype.load = function()
+{
+    this.ajaxRequest = new XMLHttpRequest();
+    var scope = this;
+    this.ajaxRequest.onreadystatechange = function()
+    {
+        scope.onXMLLoaded();
+    };
+
+    this.ajaxRequest.open("GET", this.url, true);
+    if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml");
+    this.ajaxRequest.send(null)
+};
+
+/**
+ * Invoked when XML file is loaded
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
+{
+    if (this.ajaxRequest.readyState == 4)
+    {
+        if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1)
+        {
+            var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue;
+            var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
+            this.texture = image.texture.baseTexture;
+
+            var data = {};
+            var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0];
+            var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0];
+            data.font = info.attributes.getNamedItem("face").nodeValue;
+            data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10);
+            data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10);
+            data.chars = {};
+
+            //parse letters
+            var letters = this.ajaxRequest.responseXML.getElementsByTagName("char");
+
+            for (var i = 0; i < letters.length; i++)
+            {
+                var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10);
+
+                var textureRect = {
+                    x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10),
+                    y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10),
+                    width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10),
+                    height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10)
+                };
+                PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect);
+
+                data.chars[charCode] = {
+                    xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10),
+                    yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10),
+                    xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10),
+                    kerning: {}
+                };
+            }
+
+            //parse kernings
+            var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning");
+            for (i = 0; i < kernings.length; i++)
+            {
+               var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10);
+               var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10);
+               var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10);
+
+                data.chars[second].kerning[first] = amount;
+
+            }
+            PIXI.BitmapText.fonts[data.font] = data;
+
+            var scope = this;
+            image.addEventListener("loaded", function() {
+                scope.onLoaded();
+            });
+            image.load();
+        }
+    }
+};
+
+/**
+ * Invoked when all files are loaded (xml/fnt and texture)
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_ImageLoader.js.html b/docs/files/src_pixi_loaders_ImageLoader.js.html new file mode 100644 index 0000000..f6fcf07 --- /dev/null +++ b/docs/files/src_pixi_loaders_ImageLoader.js.html @@ -0,0 +1,200 @@ + + + + + src/pixi/loaders/ImageLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/ImageLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif")
+ * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
+ * When loaded this class will dispatch a 'loaded' event
+ * @class ImageLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url The url of the image
+ * @param {Boolean} crossorigin
+ */
+PIXI.ImageLoader = function(url, crossorigin)
+{
+    PIXI.EventTarget.call(this);
+    this.texture = PIXI.Texture.fromImage(url, crossorigin);
+};
+
+// constructor
+PIXI.ImageLoader.constructor = PIXI.ImageLoader;
+
+/**
+ * Loads image or takes it from cache
+ */
+PIXI.ImageLoader.prototype.load = function()
+{
+    if(!this.texture.baseTexture.hasLoaded)
+    {
+        var scope = this;
+        this.texture.baseTexture.addEventListener("loaded", function()
+        {
+            scope.onLoaded();
+        });
+    }
+    else
+    {
+        this.onLoaded();
+    }
+};
+
+/**
+ * Invoked when image file is loaded or it is already cached and ready to use
+ * @private
+ */
+PIXI.ImageLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 5510866..3b14d2f 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,30 +136,31 @@ * The sprite sheet loader is used to load in JSON sprite sheet data * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event + * When loaded this class will dispatch a "loaded" event * @class SpriteSheetLoader * @extends EventTarget * @constructor - * @param url {String} the url of the sprite sheet JSON file + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin */ -PIXI.SpriteSheetLoader = function(url) +PIXI.SpriteSheetLoader = function(url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker * make sure to set the format as "JSON" */ - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; this.frames = {}; - this.crossorigin = false; -} + this.crossorigin = crossorigin; +}; // constructor PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; @@ -165,32 +172,38 @@ { this.ajaxRequest = new AjaxRequest(); var scope = this; - this.ajaxRequest.onreadystatechange=function() + this.ajaxRequest.onreadystatechange = function() { - scope.onLoaded(); - } + scope.onJSONLoaded(); + }; - this.ajaxRequest.open("GET", this.url, true) + this.ajaxRequest.open("GET", this.url, true); if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); this.ajaxRequest.send(null) -} +}; -PIXI.SpriteSheetLoader.prototype.onLoaded = function() +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() { - if (this.ajaxRequest.readyState==4) + if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) { var rect = frameData[i].frame; if (rect) @@ -201,32 +214,24 @@ { //var realSize = frameData[i].spriteSourceSize; PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + PIXI.TextureCache[i].trim.x = 0;// (realSize.x / rect.w) // calculate the offset! } - // this.frames[i] = ; } } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; diff --git a/docs/files/src_pixi_renderers_CanvasRenderer.js.html b/docs/files/src_pixi_renderers_CanvasRenderer.js.html index 5598bbd..0b91b46 100644 --- a/docs/files/src_pixi_renderers_CanvasRenderer.js.html +++ b/docs/files/src_pixi_renderers_CanvasRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLBatch.js.html b/docs/files/src_pixi_renderers_WebGLBatch.js.html index 17824ca..95b86b5 100644 --- a/docs/files/src_pixi_renderers_WebGLBatch.js.html +++ b/docs/files/src_pixi_renderers_WebGLBatch.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 0a39149..af0ce9f 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLShaders.js.html b/docs/files/src_pixi_renderers_WebGLShaders.js.html index 40ac3bd..bb52ff9 100644 --- a/docs/files/src_pixi_renderers_WebGLShaders.js.html +++ b/docs/files/src_pixi_renderers_WebGLShaders.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_text_BitmapText.js.html b/docs/files/src_pixi_text_BitmapText.js.html new file mode 100644 index 0000000..9fdae27 --- /dev/null +++ b/docs/files/src_pixi_text_BitmapText.js.html @@ -0,0 +1,306 @@ + + + + + src/pixi/text/BitmapText.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/BitmapText.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text using bitmap font 
+ * You can generate the fnt files using 
+ * http://www.angelcode.com/products/bmfont/ for windows of
+ * http://www.bmglyph.com/ for mac.
+ * @class BitmapText
+ * @extends DisplayObjectContainer
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously)
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+ //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font
+PIXI.BitmapText = function(text, style)
+{
+    PIXI.DisplayObjectContainer.call(this);
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false
+
+};
+
+// constructor
+PIXI.BitmapText.constructor = PIXI.BitmapText;
+PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);
+
+/**
+ * Set the copy for the text object
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.BitmapText.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+PIXI.BitmapText.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.align = style.align || "left";
+    this.style = style;
+
+    var font = style.font.split(" ");
+    this.fontName = font[font.length - 1];
+    this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size;
+
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.BitmapText.prototype.updateText = function()
+{
+    var data = PIXI.BitmapText.fonts[this.fontName];
+    var pos = new PIXI.Point();
+    var prevCharCode = null;
+    var chars = [];
+    var maxLineWidth = 0;
+    var lineWidths = [];
+    var line = 0;
+    var scale = this.fontSize / data.size;
+    for(var i = 0; i < this.text.length; i++)
+    {
+        var charCode = this.text.charCodeAt(i);
+        if(charCode == "\n".charCodeAt(0))
+        {
+            lineWidths.push(pos.x);
+            maxLineWidth = Math.max(maxLineWidth, pos.x);
+            line++;
+
+            pos.x = 0;
+            pos.y += data.lineHeight;
+            prevCharCode = null;
+            continue;
+        }
+        
+        var charData = data.chars[charCode];
+        if(!charData) continue;
+
+        if(prevCharCode && charData[prevCharCode])
+        {
+           pos.x += charData.kerning[prevCharCode];
+        }
+        chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)});
+        pos.x += charData.xAdvance;
+
+        prevCharCode = charCode;
+    }
+
+    lineWidths.push(pos.x);
+    maxLineWidth = Math.max(maxLineWidth, pos.x);
+
+    var lineAlignOffsets = [];
+    for(i = 0; i <= line; i++)
+    {
+        var alignOffset = 0;
+        if(this.style.align == "right")
+        {
+            alignOffset = maxLineWidth - lineWidths[i];
+        }
+        else if(this.style.align == "center")
+        {
+            alignOffset = (maxLineWidth - lineWidths[i]) / 2;
+        }
+        lineAlignOffsets.push(alignOffset);
+    }
+
+    for(i = 0; i < chars.length; i++)
+    {
+        var char = PIXI.Sprite.fromFrame(chars[i].charCode);
+        char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale;
+        char.position.y = chars[i].position.y * scale;
+        char.scale.x = char.scale.y = scale;
+        this.addChild(char);
+    }
+
+    this.width = pos.x * scale;
+    this.height = (pos.y + data.lineHeight) * scale;
+};
+
+/**
+ * @private
+ */
+PIXI.BitmapText.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+        while(this.children.length > 0)
+        {
+            this.removeChild(this.getChildAt(0));
+        }
+        this.updateText();
+
+        this.dirty = false;
+	}
+	
+	PIXI.DisplayObjectContainer.prototype.updateTransform.call(this);
+};
+
+PIXI.BitmapText.fonts = {};
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_text_Text.js.html b/docs/files/src_pixi_text_Text.js.html new file mode 100644 index 0000000..7933074 --- /dev/null +++ b/docs/files/src_pixi_text_Text.js.html @@ -0,0 +1,344 @@ + + + + + src/pixi/text/Text.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/Text.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text to split a line you can use "\n"
+ * @class Text
+ * @extends Sprite
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text = function(text, style)
+{
+    this.canvas = document.createElement("canvas");
+    this.context = this.canvas.getContext("2d");
+    PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas));
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false;
+};
+
+// constructor
+PIXI.Text.constructor = PIXI.Text;
+PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype);
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font="bold 20pt Arial"] The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.font = style.font || "bold 20pt Arial";
+    style.fill = style.fill || "black";
+    style.align = style.align || "left";
+    style.strokeThickness = style.strokeThickness || 0;
+    this.style = style;
+    this.dirty = true;
+};
+
+/**
+ * Set the copy for the text object. To split a line you can use "\n"
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.Sprite.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.Text.prototype.updateText = function()
+{
+	this.context.font = this.style.font;
+
+	//split text into lines
+	var lines = this.text.split("\n");
+
+	//calculate text width
+	var lineWidths = [];
+	var maxLineWidth = 0;
+	for (var i = 0; i < lines.length; i++)
+	{
+		var lineWidth = this.context.measureText(lines[i]).width;
+		lineWidths[i] = lineWidth;
+		maxLineWidth = Math.max(maxLineWidth, lineWidth);
+	}
+	this.canvas.width = maxLineWidth + this.style.strokeThickness;
+	
+	//calculate text height
+	var lineHeight = this.determineFontHeight("font: " + this.style.font  + ";") + this.style.strokeThickness;
+	this.canvas.height = lineHeight * lines.length;
+
+	//set canvas text styles
+	this.context.fillStyle = this.style.fill;
+	this.context.font = this.style.font;
+	
+	this.context.strokeStyle = this.style.stroke;
+	this.context.lineWidth = this.style.strokeThickness;
+
+	this.context.textBaseline = "top";
+
+	//draw lines line by line
+	for (i = 0; i < lines.length; i++)
+	{
+		var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight);
+	
+		if(this.style.align == "right")
+		{
+			linePosition.x += maxLineWidth - lineWidths[i];
+		}
+		else if(this.style.align == "center")
+		{
+			linePosition.x += (maxLineWidth - lineWidths[i]) / 2;
+		}
+
+		if(this.style.stroke && this.style.strokeThickness)
+		{
+			this.context.strokeText(lines[i], linePosition.x, linePosition.y);
+		}
+
+		if(this.style.fill)
+		{
+			this.context.fillText(lines[i], linePosition.x, linePosition.y);
+		}
+	}
+	
+    this.updateTexture();
+};
+
+/**
+ * Updates texture size based on canvas size
+ * @private
+ */
+PIXI.Text.prototype.updateTexture = function()
+{
+
+    this.texture.baseTexture.width = this.canvas.width;
+    this.texture.baseTexture.height = this.canvas.height;
+    this.texture.frame.width = this.canvas.width;
+    this.texture.frame.height = this.canvas.height;
+    PIXI.texturesToUpdate.push(this.texture.baseTexture);
+};
+
+/**
+ * @private
+ */
+PIXI.Text.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+		this.updateText();	
+		this.dirty = false;
+	}
+	
+	PIXI.Sprite.prototype.updateTransform.call(this);
+};
+
+/*
+ * http://stackoverflow.com/users/34441/ellisbben
+ * great solution to the problem!
+ */
+PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
+{
+	// build a little reference dictionary so if the font style has been used return a
+	// cached version...
+	var result = PIXI.Text.heightCache[fontStyle];
+	
+	if(!result)
+	{
+		var body = document.getElementsByTagName("body")[0];
+		var dummy = document.createElement("div");
+		var dummyText = document.createTextNode("M");
+		dummy.appendChild(dummyText);
+		dummy.setAttribute("style", fontStyle);
+		body.appendChild(dummy);
+		
+		result = dummy.offsetHeight;
+		PIXI.Text.heightCache[fontStyle] = result;
+		
+		body.removeChild(dummy);
+	}
+	
+	return result;
+};
+
+PIXI.Text.prototype.destroy = function(destroyTexture)
+{
+	if(destroyTexture)
+	{
+		this.texture.destroy();
+	}
+		
+};
+
+PIXI.Text.heightCache = {};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_textures_BaseTexture.js.html b/docs/files/src_pixi_textures_BaseTexture.js.html index a7d8f96..31917f0 100644 --- a/docs/files/src_pixi_textures_BaseTexture.js.html +++ b/docs/files/src_pixi_textures_BaseTexture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_textures_Texture.js.html b/docs/files/src_pixi_textures_Texture.js.html index 35f12dc..ca52cac 100644 --- a/docs/files/src_pixi_textures_Texture.js.html +++ b/docs/files/src_pixi_textures_Texture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_Detector.js.html b/docs/files/src_pixi_utils_Detector.js.html index 6b7d031..62cc770 100644 --- a/docs/files/src_pixi_utils_Detector.js.html +++ b/docs/files/src_pixi_utils_Detector.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Text.js.html b/docs/files/src_pixi_Text.js.html deleted file mode 100644 index 33b7cf2..0000000 --- a/docs/files/src_pixi_Text.js.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - src/pixi/Text.js - Pixi.JS - - - - - - - - -
    -
    -
    - -

    - -
    -
    - API Docs for: 1.0.0 -
    -
    -
    - -
    - -
    -
    -
    - Show: - - - - - - - -
    - - -
    -
    -
    -

    File: src/pixi/Text.js

    - -
    - 
    -/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * A Text Object will create a line of text
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.canvas = document.createElement("canvas");
-	
-	this.context = this.canvas.getContext("2d");
-	//document.body.appendChild(this.canvas);
-	this.setText(text);
-	this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
-	
-	this.updateText();
-	
-	PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
-	
-	// need to store a canvas that can
-}
-
-// constructor
-PIXI.Text.constructor = PIXI.Text;
-PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
-
-/**
- * Set the copy for the text object
- * @methos setText
- * @param text {String} The copy that you would like the text to display
- */
-PIXI.Text.prototype.setText = function(text)
-{
-	this.text = text || " ";
-	this.dirty = true;
-}
-
-/**
- * Set the style of the text
- * @method setStyle
- * @constructor
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.fontStyle = fontStyle || "bold 20pt Arial";
-	this.fillStyle = fillStyle;
-	this.strokeStyle = strokeStyle;
-	this.strokeThickness = strokeThickness || 0;
-	
-	this.dirty = true;
-}
-
-/**
- * @private
- */
-PIXI.Text.prototype.updateText = function()
-{
-//	console.log(this.text);
-	this.context.font = this.fontStyle;
-		
-	this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
-	this.canvas.height = this.determineFontHeight("font: " + this.fontStyle  + ";")+ this.strokeThickness;// textDimensions.height;
-
-	this.context.fillStyle = this.fillStyle;
-	this.context.font = this.fontStyle;
-	
-    this.context.strokeStyle = this.strokeStyle;
-	this.context.lineWidth = this.strokeThickness;
-
-	this.context.textBaseline="top"; 
-
-    if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	
-	
-//	console.log("//")
-}
-
-PIXI.Text.prototype.updateTransform = function()
-{
-	if(this.dirty)
-	{
-		this.updateText();	
-		
-		// update the texture..
-		this.texture.baseTexture.width = this.canvas.width;
-		this.texture.baseTexture.height = this.canvas.height;
-		this.texture.frame.width = this.canvas.width;
-		this.texture.frame.height = this.canvas.height;
-		
-		PIXI.texturesToUpdate.push(this.texture.baseTexture);
-		this.dirty = false;
-	}
-	
-	PIXI.Sprite.prototype.updateTransform.call( this );
-}
-
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
-{
-	// build a little refference dictionary so if the font style has been used return a
-	// cached version...
-	var result = PIXI.Text.heightCache[fontStyle]
-	
-	if(!result)
-	{
-		var body = document.getElementsByTagName("body")[0];
-		var dummy = document.createElement("div");
-		var dummyText = document.createTextNode("M");
-		dummy.appendChild(dummyText);
-		dummy.setAttribute("style", fontStyle);
-		body.appendChild(dummy);
-		
-		result = dummy.offsetHeight;
-		PIXI.Text.heightCache[fontStyle] = result
-		
-		body.removeChild(dummy);
-	}
-	
-	return result;
-};
-
-PIXI.Text.prototype.destroy = function(destroyTexture)
-{
-	if(destroyTexture)
-	{
-		this.texture.destroy();
-	}
-		
-}
-
-PIXI.Text.heightCache = {};
-
-
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - diff --git a/docs/files/src_pixi_extras_Rope.js.html b/docs/files/src_pixi_extras_Rope.js.html index 7e2ceff..219f049 100644 --- a/docs/files/src_pixi_extras_Rope.js.html +++ b/docs/files/src_pixi_extras_Rope.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_Strip.js.html b/docs/files/src_pixi_extras_Strip.js.html index 8f748c2..a7a64cd 100644 --- a/docs/files/src_pixi_extras_Strip.js.html +++ b/docs/files/src_pixi_extras_Strip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_TilingSprite.js.html b/docs/files/src_pixi_extras_TilingSprite.js.html index af3d84d..b61c15f 100644 --- a/docs/files/src_pixi_extras_TilingSprite.js.html +++ b/docs/files/src_pixi_extras_TilingSprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_loaders_AssetLoader.js.html b/docs/files/src_pixi_loaders_AssetLoader.js.html index 089d5cf..594481e 100644 --- a/docs/files/src_pixi_loaders_AssetLoader.js.html +++ b/docs/files/src_pixi_loaders_AssetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -127,17 +133,17 @@ */ /** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -145,11 +151,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -169,105 +183,45 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; diff --git a/docs/files/src_pixi_loaders_BitmapFontLoader.js.html b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html new file mode 100644 index 0000000..6fd5d80 --- /dev/null +++ b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html @@ -0,0 +1,275 @@ + + + + + src/pixi/loaders/BitmapFontLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/BitmapFontLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The xml loader is used to load in XML bitmap font data ("xml" or "fnt")
+ * To generate the data you can use http://www.angelcode.com/products/bmfont/
+ * This loader will also load the image file as the data.
+ * When loaded this class will dispatch a "loaded" event
+ * @class BitmapFontLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url the url of the sprite sheet JSON file
+ * @param {Boolean} crossorigin
+ */
+
+PIXI.BitmapFontLoader = function(url, crossorigin)
+{
+    /*
+     * i use texture packer to load the assets..
+     * http://www.codeandweb.com/texturepacker
+     * make sure to set the format as "JSON"
+     */
+    PIXI.EventTarget.call(this);
+    this.url = url;
+    this.baseUrl = url.replace(/[^\/]*$/, "");
+    this.texture = null;
+    this.crossorigin = crossorigin;
+};
+
+// constructor
+PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader;
+
+/**
+ * This will begin loading the JSON file
+ */
+PIXI.BitmapFontLoader.prototype.load = function()
+{
+    this.ajaxRequest = new XMLHttpRequest();
+    var scope = this;
+    this.ajaxRequest.onreadystatechange = function()
+    {
+        scope.onXMLLoaded();
+    };
+
+    this.ajaxRequest.open("GET", this.url, true);
+    if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml");
+    this.ajaxRequest.send(null)
+};
+
+/**
+ * Invoked when XML file is loaded
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
+{
+    if (this.ajaxRequest.readyState == 4)
+    {
+        if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1)
+        {
+            var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue;
+            var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
+            this.texture = image.texture.baseTexture;
+
+            var data = {};
+            var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0];
+            var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0];
+            data.font = info.attributes.getNamedItem("face").nodeValue;
+            data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10);
+            data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10);
+            data.chars = {};
+
+            //parse letters
+            var letters = this.ajaxRequest.responseXML.getElementsByTagName("char");
+
+            for (var i = 0; i < letters.length; i++)
+            {
+                var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10);
+
+                var textureRect = {
+                    x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10),
+                    y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10),
+                    width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10),
+                    height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10)
+                };
+                PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect);
+
+                data.chars[charCode] = {
+                    xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10),
+                    yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10),
+                    xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10),
+                    kerning: {}
+                };
+            }
+
+            //parse kernings
+            var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning");
+            for (i = 0; i < kernings.length; i++)
+            {
+               var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10);
+               var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10);
+               var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10);
+
+                data.chars[second].kerning[first] = amount;
+
+            }
+            PIXI.BitmapText.fonts[data.font] = data;
+
+            var scope = this;
+            image.addEventListener("loaded", function() {
+                scope.onLoaded();
+            });
+            image.load();
+        }
+    }
+};
+
+/**
+ * Invoked when all files are loaded (xml/fnt and texture)
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_ImageLoader.js.html b/docs/files/src_pixi_loaders_ImageLoader.js.html new file mode 100644 index 0000000..f6fcf07 --- /dev/null +++ b/docs/files/src_pixi_loaders_ImageLoader.js.html @@ -0,0 +1,200 @@ + + + + + src/pixi/loaders/ImageLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/ImageLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif")
+ * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
+ * When loaded this class will dispatch a 'loaded' event
+ * @class ImageLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url The url of the image
+ * @param {Boolean} crossorigin
+ */
+PIXI.ImageLoader = function(url, crossorigin)
+{
+    PIXI.EventTarget.call(this);
+    this.texture = PIXI.Texture.fromImage(url, crossorigin);
+};
+
+// constructor
+PIXI.ImageLoader.constructor = PIXI.ImageLoader;
+
+/**
+ * Loads image or takes it from cache
+ */
+PIXI.ImageLoader.prototype.load = function()
+{
+    if(!this.texture.baseTexture.hasLoaded)
+    {
+        var scope = this;
+        this.texture.baseTexture.addEventListener("loaded", function()
+        {
+            scope.onLoaded();
+        });
+    }
+    else
+    {
+        this.onLoaded();
+    }
+};
+
+/**
+ * Invoked when image file is loaded or it is already cached and ready to use
+ * @private
+ */
+PIXI.ImageLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 5510866..3b14d2f 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,30 +136,31 @@ * The sprite sheet loader is used to load in JSON sprite sheet data * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event + * When loaded this class will dispatch a "loaded" event * @class SpriteSheetLoader * @extends EventTarget * @constructor - * @param url {String} the url of the sprite sheet JSON file + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin */ -PIXI.SpriteSheetLoader = function(url) +PIXI.SpriteSheetLoader = function(url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker * make sure to set the format as "JSON" */ - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; this.frames = {}; - this.crossorigin = false; -} + this.crossorigin = crossorigin; +}; // constructor PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; @@ -165,32 +172,38 @@ { this.ajaxRequest = new AjaxRequest(); var scope = this; - this.ajaxRequest.onreadystatechange=function() + this.ajaxRequest.onreadystatechange = function() { - scope.onLoaded(); - } + scope.onJSONLoaded(); + }; - this.ajaxRequest.open("GET", this.url, true) + this.ajaxRequest.open("GET", this.url, true); if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); this.ajaxRequest.send(null) -} +}; -PIXI.SpriteSheetLoader.prototype.onLoaded = function() +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() { - if (this.ajaxRequest.readyState==4) + if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) { var rect = frameData[i].frame; if (rect) @@ -201,32 +214,24 @@ { //var realSize = frameData[i].spriteSourceSize; PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + PIXI.TextureCache[i].trim.x = 0;// (realSize.x / rect.w) // calculate the offset! } - // this.frames[i] = ; } } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; diff --git a/docs/files/src_pixi_renderers_CanvasRenderer.js.html b/docs/files/src_pixi_renderers_CanvasRenderer.js.html index 5598bbd..0b91b46 100644 --- a/docs/files/src_pixi_renderers_CanvasRenderer.js.html +++ b/docs/files/src_pixi_renderers_CanvasRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLBatch.js.html b/docs/files/src_pixi_renderers_WebGLBatch.js.html index 17824ca..95b86b5 100644 --- a/docs/files/src_pixi_renderers_WebGLBatch.js.html +++ b/docs/files/src_pixi_renderers_WebGLBatch.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 0a39149..af0ce9f 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLShaders.js.html b/docs/files/src_pixi_renderers_WebGLShaders.js.html index 40ac3bd..bb52ff9 100644 --- a/docs/files/src_pixi_renderers_WebGLShaders.js.html +++ b/docs/files/src_pixi_renderers_WebGLShaders.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_text_BitmapText.js.html b/docs/files/src_pixi_text_BitmapText.js.html new file mode 100644 index 0000000..9fdae27 --- /dev/null +++ b/docs/files/src_pixi_text_BitmapText.js.html @@ -0,0 +1,306 @@ + + + + + src/pixi/text/BitmapText.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/BitmapText.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text using bitmap font 
+ * You can generate the fnt files using 
+ * http://www.angelcode.com/products/bmfont/ for windows of
+ * http://www.bmglyph.com/ for mac.
+ * @class BitmapText
+ * @extends DisplayObjectContainer
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously)
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+ //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font
+PIXI.BitmapText = function(text, style)
+{
+    PIXI.DisplayObjectContainer.call(this);
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false
+
+};
+
+// constructor
+PIXI.BitmapText.constructor = PIXI.BitmapText;
+PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);
+
+/**
+ * Set the copy for the text object
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.BitmapText.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+PIXI.BitmapText.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.align = style.align || "left";
+    this.style = style;
+
+    var font = style.font.split(" ");
+    this.fontName = font[font.length - 1];
+    this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size;
+
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.BitmapText.prototype.updateText = function()
+{
+    var data = PIXI.BitmapText.fonts[this.fontName];
+    var pos = new PIXI.Point();
+    var prevCharCode = null;
+    var chars = [];
+    var maxLineWidth = 0;
+    var lineWidths = [];
+    var line = 0;
+    var scale = this.fontSize / data.size;
+    for(var i = 0; i < this.text.length; i++)
+    {
+        var charCode = this.text.charCodeAt(i);
+        if(charCode == "\n".charCodeAt(0))
+        {
+            lineWidths.push(pos.x);
+            maxLineWidth = Math.max(maxLineWidth, pos.x);
+            line++;
+
+            pos.x = 0;
+            pos.y += data.lineHeight;
+            prevCharCode = null;
+            continue;
+        }
+        
+        var charData = data.chars[charCode];
+        if(!charData) continue;
+
+        if(prevCharCode && charData[prevCharCode])
+        {
+           pos.x += charData.kerning[prevCharCode];
+        }
+        chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)});
+        pos.x += charData.xAdvance;
+
+        prevCharCode = charCode;
+    }
+
+    lineWidths.push(pos.x);
+    maxLineWidth = Math.max(maxLineWidth, pos.x);
+
+    var lineAlignOffsets = [];
+    for(i = 0; i <= line; i++)
+    {
+        var alignOffset = 0;
+        if(this.style.align == "right")
+        {
+            alignOffset = maxLineWidth - lineWidths[i];
+        }
+        else if(this.style.align == "center")
+        {
+            alignOffset = (maxLineWidth - lineWidths[i]) / 2;
+        }
+        lineAlignOffsets.push(alignOffset);
+    }
+
+    for(i = 0; i < chars.length; i++)
+    {
+        var char = PIXI.Sprite.fromFrame(chars[i].charCode);
+        char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale;
+        char.position.y = chars[i].position.y * scale;
+        char.scale.x = char.scale.y = scale;
+        this.addChild(char);
+    }
+
+    this.width = pos.x * scale;
+    this.height = (pos.y + data.lineHeight) * scale;
+};
+
+/**
+ * @private
+ */
+PIXI.BitmapText.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+        while(this.children.length > 0)
+        {
+            this.removeChild(this.getChildAt(0));
+        }
+        this.updateText();
+
+        this.dirty = false;
+	}
+	
+	PIXI.DisplayObjectContainer.prototype.updateTransform.call(this);
+};
+
+PIXI.BitmapText.fonts = {};
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_text_Text.js.html b/docs/files/src_pixi_text_Text.js.html new file mode 100644 index 0000000..7933074 --- /dev/null +++ b/docs/files/src_pixi_text_Text.js.html @@ -0,0 +1,344 @@ + + + + + src/pixi/text/Text.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/Text.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text to split a line you can use "\n"
+ * @class Text
+ * @extends Sprite
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text = function(text, style)
+{
+    this.canvas = document.createElement("canvas");
+    this.context = this.canvas.getContext("2d");
+    PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas));
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false;
+};
+
+// constructor
+PIXI.Text.constructor = PIXI.Text;
+PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype);
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font="bold 20pt Arial"] The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.font = style.font || "bold 20pt Arial";
+    style.fill = style.fill || "black";
+    style.align = style.align || "left";
+    style.strokeThickness = style.strokeThickness || 0;
+    this.style = style;
+    this.dirty = true;
+};
+
+/**
+ * Set the copy for the text object. To split a line you can use "\n"
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.Sprite.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.Text.prototype.updateText = function()
+{
+	this.context.font = this.style.font;
+
+	//split text into lines
+	var lines = this.text.split("\n");
+
+	//calculate text width
+	var lineWidths = [];
+	var maxLineWidth = 0;
+	for (var i = 0; i < lines.length; i++)
+	{
+		var lineWidth = this.context.measureText(lines[i]).width;
+		lineWidths[i] = lineWidth;
+		maxLineWidth = Math.max(maxLineWidth, lineWidth);
+	}
+	this.canvas.width = maxLineWidth + this.style.strokeThickness;
+	
+	//calculate text height
+	var lineHeight = this.determineFontHeight("font: " + this.style.font  + ";") + this.style.strokeThickness;
+	this.canvas.height = lineHeight * lines.length;
+
+	//set canvas text styles
+	this.context.fillStyle = this.style.fill;
+	this.context.font = this.style.font;
+	
+	this.context.strokeStyle = this.style.stroke;
+	this.context.lineWidth = this.style.strokeThickness;
+
+	this.context.textBaseline = "top";
+
+	//draw lines line by line
+	for (i = 0; i < lines.length; i++)
+	{
+		var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight);
+	
+		if(this.style.align == "right")
+		{
+			linePosition.x += maxLineWidth - lineWidths[i];
+		}
+		else if(this.style.align == "center")
+		{
+			linePosition.x += (maxLineWidth - lineWidths[i]) / 2;
+		}
+
+		if(this.style.stroke && this.style.strokeThickness)
+		{
+			this.context.strokeText(lines[i], linePosition.x, linePosition.y);
+		}
+
+		if(this.style.fill)
+		{
+			this.context.fillText(lines[i], linePosition.x, linePosition.y);
+		}
+	}
+	
+    this.updateTexture();
+};
+
+/**
+ * Updates texture size based on canvas size
+ * @private
+ */
+PIXI.Text.prototype.updateTexture = function()
+{
+
+    this.texture.baseTexture.width = this.canvas.width;
+    this.texture.baseTexture.height = this.canvas.height;
+    this.texture.frame.width = this.canvas.width;
+    this.texture.frame.height = this.canvas.height;
+    PIXI.texturesToUpdate.push(this.texture.baseTexture);
+};
+
+/**
+ * @private
+ */
+PIXI.Text.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+		this.updateText();	
+		this.dirty = false;
+	}
+	
+	PIXI.Sprite.prototype.updateTransform.call(this);
+};
+
+/*
+ * http://stackoverflow.com/users/34441/ellisbben
+ * great solution to the problem!
+ */
+PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
+{
+	// build a little reference dictionary so if the font style has been used return a
+	// cached version...
+	var result = PIXI.Text.heightCache[fontStyle];
+	
+	if(!result)
+	{
+		var body = document.getElementsByTagName("body")[0];
+		var dummy = document.createElement("div");
+		var dummyText = document.createTextNode("M");
+		dummy.appendChild(dummyText);
+		dummy.setAttribute("style", fontStyle);
+		body.appendChild(dummy);
+		
+		result = dummy.offsetHeight;
+		PIXI.Text.heightCache[fontStyle] = result;
+		
+		body.removeChild(dummy);
+	}
+	
+	return result;
+};
+
+PIXI.Text.prototype.destroy = function(destroyTexture)
+{
+	if(destroyTexture)
+	{
+		this.texture.destroy();
+	}
+		
+};
+
+PIXI.Text.heightCache = {};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_textures_BaseTexture.js.html b/docs/files/src_pixi_textures_BaseTexture.js.html index a7d8f96..31917f0 100644 --- a/docs/files/src_pixi_textures_BaseTexture.js.html +++ b/docs/files/src_pixi_textures_BaseTexture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_textures_Texture.js.html b/docs/files/src_pixi_textures_Texture.js.html index 35f12dc..ca52cac 100644 --- a/docs/files/src_pixi_textures_Texture.js.html +++ b/docs/files/src_pixi_textures_Texture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_Detector.js.html b/docs/files/src_pixi_utils_Detector.js.html index 6b7d031..62cc770 100644 --- a/docs/files/src_pixi_utils_Detector.js.html +++ b/docs/files/src_pixi_utils_Detector.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_EventTarget.js.html b/docs/files/src_pixi_utils_EventTarget.js.html index 929e6eb..7a794c3 100644 --- a/docs/files/src_pixi_utils_EventTarget.js.html +++ b/docs/files/src_pixi_utils_EventTarget.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Text.js.html b/docs/files/src_pixi_Text.js.html deleted file mode 100644 index 33b7cf2..0000000 --- a/docs/files/src_pixi_Text.js.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - src/pixi/Text.js - Pixi.JS - - - - - - - - -
    -
    -
    - -

    - -
    -
    - API Docs for: 1.0.0 -
    -
    -
    - -
    - -
    -
    -
    - Show: - - - - - - - -
    - - -
    -
    -
    -

    File: src/pixi/Text.js

    - -
    - 
    -/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * A Text Object will create a line of text
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.canvas = document.createElement("canvas");
-	
-	this.context = this.canvas.getContext("2d");
-	//document.body.appendChild(this.canvas);
-	this.setText(text);
-	this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
-	
-	this.updateText();
-	
-	PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
-	
-	// need to store a canvas that can
-}
-
-// constructor
-PIXI.Text.constructor = PIXI.Text;
-PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
-
-/**
- * Set the copy for the text object
- * @methos setText
- * @param text {String} The copy that you would like the text to display
- */
-PIXI.Text.prototype.setText = function(text)
-{
-	this.text = text || " ";
-	this.dirty = true;
-}
-
-/**
- * Set the style of the text
- * @method setStyle
- * @constructor
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.fontStyle = fontStyle || "bold 20pt Arial";
-	this.fillStyle = fillStyle;
-	this.strokeStyle = strokeStyle;
-	this.strokeThickness = strokeThickness || 0;
-	
-	this.dirty = true;
-}
-
-/**
- * @private
- */
-PIXI.Text.prototype.updateText = function()
-{
-//	console.log(this.text);
-	this.context.font = this.fontStyle;
-		
-	this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
-	this.canvas.height = this.determineFontHeight("font: " + this.fontStyle  + ";")+ this.strokeThickness;// textDimensions.height;
-
-	this.context.fillStyle = this.fillStyle;
-	this.context.font = this.fontStyle;
-	
-    this.context.strokeStyle = this.strokeStyle;
-	this.context.lineWidth = this.strokeThickness;
-
-	this.context.textBaseline="top"; 
-
-    if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	
-	
-//	console.log("//")
-}
-
-PIXI.Text.prototype.updateTransform = function()
-{
-	if(this.dirty)
-	{
-		this.updateText();	
-		
-		// update the texture..
-		this.texture.baseTexture.width = this.canvas.width;
-		this.texture.baseTexture.height = this.canvas.height;
-		this.texture.frame.width = this.canvas.width;
-		this.texture.frame.height = this.canvas.height;
-		
-		PIXI.texturesToUpdate.push(this.texture.baseTexture);
-		this.dirty = false;
-	}
-	
-	PIXI.Sprite.prototype.updateTransform.call( this );
-}
-
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
-{
-	// build a little refference dictionary so if the font style has been used return a
-	// cached version...
-	var result = PIXI.Text.heightCache[fontStyle]
-	
-	if(!result)
-	{
-		var body = document.getElementsByTagName("body")[0];
-		var dummy = document.createElement("div");
-		var dummyText = document.createTextNode("M");
-		dummy.appendChild(dummyText);
-		dummy.setAttribute("style", fontStyle);
-		body.appendChild(dummy);
-		
-		result = dummy.offsetHeight;
-		PIXI.Text.heightCache[fontStyle] = result
-		
-		body.removeChild(dummy);
-	}
-	
-	return result;
-};
-
-PIXI.Text.prototype.destroy = function(destroyTexture)
-{
-	if(destroyTexture)
-	{
-		this.texture.destroy();
-	}
-		
-}
-
-PIXI.Text.heightCache = {};
-
-
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - diff --git a/docs/files/src_pixi_extras_Rope.js.html b/docs/files/src_pixi_extras_Rope.js.html index 7e2ceff..219f049 100644 --- a/docs/files/src_pixi_extras_Rope.js.html +++ b/docs/files/src_pixi_extras_Rope.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_Strip.js.html b/docs/files/src_pixi_extras_Strip.js.html index 8f748c2..a7a64cd 100644 --- a/docs/files/src_pixi_extras_Strip.js.html +++ b/docs/files/src_pixi_extras_Strip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_TilingSprite.js.html b/docs/files/src_pixi_extras_TilingSprite.js.html index af3d84d..b61c15f 100644 --- a/docs/files/src_pixi_extras_TilingSprite.js.html +++ b/docs/files/src_pixi_extras_TilingSprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_loaders_AssetLoader.js.html b/docs/files/src_pixi_loaders_AssetLoader.js.html index 089d5cf..594481e 100644 --- a/docs/files/src_pixi_loaders_AssetLoader.js.html +++ b/docs/files/src_pixi_loaders_AssetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -127,17 +133,17 @@ */ /** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -145,11 +151,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -169,105 +183,45 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; diff --git a/docs/files/src_pixi_loaders_BitmapFontLoader.js.html b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html new file mode 100644 index 0000000..6fd5d80 --- /dev/null +++ b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html @@ -0,0 +1,275 @@ + + + + + src/pixi/loaders/BitmapFontLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/BitmapFontLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The xml loader is used to load in XML bitmap font data ("xml" or "fnt")
+ * To generate the data you can use http://www.angelcode.com/products/bmfont/
+ * This loader will also load the image file as the data.
+ * When loaded this class will dispatch a "loaded" event
+ * @class BitmapFontLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url the url of the sprite sheet JSON file
+ * @param {Boolean} crossorigin
+ */
+
+PIXI.BitmapFontLoader = function(url, crossorigin)
+{
+    /*
+     * i use texture packer to load the assets..
+     * http://www.codeandweb.com/texturepacker
+     * make sure to set the format as "JSON"
+     */
+    PIXI.EventTarget.call(this);
+    this.url = url;
+    this.baseUrl = url.replace(/[^\/]*$/, "");
+    this.texture = null;
+    this.crossorigin = crossorigin;
+};
+
+// constructor
+PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader;
+
+/**
+ * This will begin loading the JSON file
+ */
+PIXI.BitmapFontLoader.prototype.load = function()
+{
+    this.ajaxRequest = new XMLHttpRequest();
+    var scope = this;
+    this.ajaxRequest.onreadystatechange = function()
+    {
+        scope.onXMLLoaded();
+    };
+
+    this.ajaxRequest.open("GET", this.url, true);
+    if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml");
+    this.ajaxRequest.send(null)
+};
+
+/**
+ * Invoked when XML file is loaded
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
+{
+    if (this.ajaxRequest.readyState == 4)
+    {
+        if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1)
+        {
+            var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue;
+            var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
+            this.texture = image.texture.baseTexture;
+
+            var data = {};
+            var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0];
+            var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0];
+            data.font = info.attributes.getNamedItem("face").nodeValue;
+            data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10);
+            data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10);
+            data.chars = {};
+
+            //parse letters
+            var letters = this.ajaxRequest.responseXML.getElementsByTagName("char");
+
+            for (var i = 0; i < letters.length; i++)
+            {
+                var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10);
+
+                var textureRect = {
+                    x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10),
+                    y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10),
+                    width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10),
+                    height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10)
+                };
+                PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect);
+
+                data.chars[charCode] = {
+                    xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10),
+                    yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10),
+                    xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10),
+                    kerning: {}
+                };
+            }
+
+            //parse kernings
+            var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning");
+            for (i = 0; i < kernings.length; i++)
+            {
+               var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10);
+               var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10);
+               var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10);
+
+                data.chars[second].kerning[first] = amount;
+
+            }
+            PIXI.BitmapText.fonts[data.font] = data;
+
+            var scope = this;
+            image.addEventListener("loaded", function() {
+                scope.onLoaded();
+            });
+            image.load();
+        }
+    }
+};
+
+/**
+ * Invoked when all files are loaded (xml/fnt and texture)
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_ImageLoader.js.html b/docs/files/src_pixi_loaders_ImageLoader.js.html new file mode 100644 index 0000000..f6fcf07 --- /dev/null +++ b/docs/files/src_pixi_loaders_ImageLoader.js.html @@ -0,0 +1,200 @@ + + + + + src/pixi/loaders/ImageLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/ImageLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif")
+ * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
+ * When loaded this class will dispatch a 'loaded' event
+ * @class ImageLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url The url of the image
+ * @param {Boolean} crossorigin
+ */
+PIXI.ImageLoader = function(url, crossorigin)
+{
+    PIXI.EventTarget.call(this);
+    this.texture = PIXI.Texture.fromImage(url, crossorigin);
+};
+
+// constructor
+PIXI.ImageLoader.constructor = PIXI.ImageLoader;
+
+/**
+ * Loads image or takes it from cache
+ */
+PIXI.ImageLoader.prototype.load = function()
+{
+    if(!this.texture.baseTexture.hasLoaded)
+    {
+        var scope = this;
+        this.texture.baseTexture.addEventListener("loaded", function()
+        {
+            scope.onLoaded();
+        });
+    }
+    else
+    {
+        this.onLoaded();
+    }
+};
+
+/**
+ * Invoked when image file is loaded or it is already cached and ready to use
+ * @private
+ */
+PIXI.ImageLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 5510866..3b14d2f 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,30 +136,31 @@ * The sprite sheet loader is used to load in JSON sprite sheet data * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event + * When loaded this class will dispatch a "loaded" event * @class SpriteSheetLoader * @extends EventTarget * @constructor - * @param url {String} the url of the sprite sheet JSON file + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin */ -PIXI.SpriteSheetLoader = function(url) +PIXI.SpriteSheetLoader = function(url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker * make sure to set the format as "JSON" */ - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; this.frames = {}; - this.crossorigin = false; -} + this.crossorigin = crossorigin; +}; // constructor PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; @@ -165,32 +172,38 @@ { this.ajaxRequest = new AjaxRequest(); var scope = this; - this.ajaxRequest.onreadystatechange=function() + this.ajaxRequest.onreadystatechange = function() { - scope.onLoaded(); - } + scope.onJSONLoaded(); + }; - this.ajaxRequest.open("GET", this.url, true) + this.ajaxRequest.open("GET", this.url, true); if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); this.ajaxRequest.send(null) -} +}; -PIXI.SpriteSheetLoader.prototype.onLoaded = function() +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() { - if (this.ajaxRequest.readyState==4) + if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) { var rect = frameData[i].frame; if (rect) @@ -201,32 +214,24 @@ { //var realSize = frameData[i].spriteSourceSize; PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + PIXI.TextureCache[i].trim.x = 0;// (realSize.x / rect.w) // calculate the offset! } - // this.frames[i] = ; } } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; diff --git a/docs/files/src_pixi_renderers_CanvasRenderer.js.html b/docs/files/src_pixi_renderers_CanvasRenderer.js.html index 5598bbd..0b91b46 100644 --- a/docs/files/src_pixi_renderers_CanvasRenderer.js.html +++ b/docs/files/src_pixi_renderers_CanvasRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLBatch.js.html b/docs/files/src_pixi_renderers_WebGLBatch.js.html index 17824ca..95b86b5 100644 --- a/docs/files/src_pixi_renderers_WebGLBatch.js.html +++ b/docs/files/src_pixi_renderers_WebGLBatch.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 0a39149..af0ce9f 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLShaders.js.html b/docs/files/src_pixi_renderers_WebGLShaders.js.html index 40ac3bd..bb52ff9 100644 --- a/docs/files/src_pixi_renderers_WebGLShaders.js.html +++ b/docs/files/src_pixi_renderers_WebGLShaders.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_text_BitmapText.js.html b/docs/files/src_pixi_text_BitmapText.js.html new file mode 100644 index 0000000..9fdae27 --- /dev/null +++ b/docs/files/src_pixi_text_BitmapText.js.html @@ -0,0 +1,306 @@ + + + + + src/pixi/text/BitmapText.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/BitmapText.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text using bitmap font 
+ * You can generate the fnt files using 
+ * http://www.angelcode.com/products/bmfont/ for windows of
+ * http://www.bmglyph.com/ for mac.
+ * @class BitmapText
+ * @extends DisplayObjectContainer
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously)
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+ //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font
+PIXI.BitmapText = function(text, style)
+{
+    PIXI.DisplayObjectContainer.call(this);
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false
+
+};
+
+// constructor
+PIXI.BitmapText.constructor = PIXI.BitmapText;
+PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);
+
+/**
+ * Set the copy for the text object
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.BitmapText.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+PIXI.BitmapText.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.align = style.align || "left";
+    this.style = style;
+
+    var font = style.font.split(" ");
+    this.fontName = font[font.length - 1];
+    this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size;
+
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.BitmapText.prototype.updateText = function()
+{
+    var data = PIXI.BitmapText.fonts[this.fontName];
+    var pos = new PIXI.Point();
+    var prevCharCode = null;
+    var chars = [];
+    var maxLineWidth = 0;
+    var lineWidths = [];
+    var line = 0;
+    var scale = this.fontSize / data.size;
+    for(var i = 0; i < this.text.length; i++)
+    {
+        var charCode = this.text.charCodeAt(i);
+        if(charCode == "\n".charCodeAt(0))
+        {
+            lineWidths.push(pos.x);
+            maxLineWidth = Math.max(maxLineWidth, pos.x);
+            line++;
+
+            pos.x = 0;
+            pos.y += data.lineHeight;
+            prevCharCode = null;
+            continue;
+        }
+        
+        var charData = data.chars[charCode];
+        if(!charData) continue;
+
+        if(prevCharCode && charData[prevCharCode])
+        {
+           pos.x += charData.kerning[prevCharCode];
+        }
+        chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)});
+        pos.x += charData.xAdvance;
+
+        prevCharCode = charCode;
+    }
+
+    lineWidths.push(pos.x);
+    maxLineWidth = Math.max(maxLineWidth, pos.x);
+
+    var lineAlignOffsets = [];
+    for(i = 0; i <= line; i++)
+    {
+        var alignOffset = 0;
+        if(this.style.align == "right")
+        {
+            alignOffset = maxLineWidth - lineWidths[i];
+        }
+        else if(this.style.align == "center")
+        {
+            alignOffset = (maxLineWidth - lineWidths[i]) / 2;
+        }
+        lineAlignOffsets.push(alignOffset);
+    }
+
+    for(i = 0; i < chars.length; i++)
+    {
+        var char = PIXI.Sprite.fromFrame(chars[i].charCode);
+        char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale;
+        char.position.y = chars[i].position.y * scale;
+        char.scale.x = char.scale.y = scale;
+        this.addChild(char);
+    }
+
+    this.width = pos.x * scale;
+    this.height = (pos.y + data.lineHeight) * scale;
+};
+
+/**
+ * @private
+ */
+PIXI.BitmapText.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+        while(this.children.length > 0)
+        {
+            this.removeChild(this.getChildAt(0));
+        }
+        this.updateText();
+
+        this.dirty = false;
+	}
+	
+	PIXI.DisplayObjectContainer.prototype.updateTransform.call(this);
+};
+
+PIXI.BitmapText.fonts = {};
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_text_Text.js.html b/docs/files/src_pixi_text_Text.js.html new file mode 100644 index 0000000..7933074 --- /dev/null +++ b/docs/files/src_pixi_text_Text.js.html @@ -0,0 +1,344 @@ + + + + + src/pixi/text/Text.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/Text.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text to split a line you can use "\n"
+ * @class Text
+ * @extends Sprite
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text = function(text, style)
+{
+    this.canvas = document.createElement("canvas");
+    this.context = this.canvas.getContext("2d");
+    PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas));
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false;
+};
+
+// constructor
+PIXI.Text.constructor = PIXI.Text;
+PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype);
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font="bold 20pt Arial"] The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.font = style.font || "bold 20pt Arial";
+    style.fill = style.fill || "black";
+    style.align = style.align || "left";
+    style.strokeThickness = style.strokeThickness || 0;
+    this.style = style;
+    this.dirty = true;
+};
+
+/**
+ * Set the copy for the text object. To split a line you can use "\n"
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.Sprite.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.Text.prototype.updateText = function()
+{
+	this.context.font = this.style.font;
+
+	//split text into lines
+	var lines = this.text.split("\n");
+
+	//calculate text width
+	var lineWidths = [];
+	var maxLineWidth = 0;
+	for (var i = 0; i < lines.length; i++)
+	{
+		var lineWidth = this.context.measureText(lines[i]).width;
+		lineWidths[i] = lineWidth;
+		maxLineWidth = Math.max(maxLineWidth, lineWidth);
+	}
+	this.canvas.width = maxLineWidth + this.style.strokeThickness;
+	
+	//calculate text height
+	var lineHeight = this.determineFontHeight("font: " + this.style.font  + ";") + this.style.strokeThickness;
+	this.canvas.height = lineHeight * lines.length;
+
+	//set canvas text styles
+	this.context.fillStyle = this.style.fill;
+	this.context.font = this.style.font;
+	
+	this.context.strokeStyle = this.style.stroke;
+	this.context.lineWidth = this.style.strokeThickness;
+
+	this.context.textBaseline = "top";
+
+	//draw lines line by line
+	for (i = 0; i < lines.length; i++)
+	{
+		var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight);
+	
+		if(this.style.align == "right")
+		{
+			linePosition.x += maxLineWidth - lineWidths[i];
+		}
+		else if(this.style.align == "center")
+		{
+			linePosition.x += (maxLineWidth - lineWidths[i]) / 2;
+		}
+
+		if(this.style.stroke && this.style.strokeThickness)
+		{
+			this.context.strokeText(lines[i], linePosition.x, linePosition.y);
+		}
+
+		if(this.style.fill)
+		{
+			this.context.fillText(lines[i], linePosition.x, linePosition.y);
+		}
+	}
+	
+    this.updateTexture();
+};
+
+/**
+ * Updates texture size based on canvas size
+ * @private
+ */
+PIXI.Text.prototype.updateTexture = function()
+{
+
+    this.texture.baseTexture.width = this.canvas.width;
+    this.texture.baseTexture.height = this.canvas.height;
+    this.texture.frame.width = this.canvas.width;
+    this.texture.frame.height = this.canvas.height;
+    PIXI.texturesToUpdate.push(this.texture.baseTexture);
+};
+
+/**
+ * @private
+ */
+PIXI.Text.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+		this.updateText();	
+		this.dirty = false;
+	}
+	
+	PIXI.Sprite.prototype.updateTransform.call(this);
+};
+
+/*
+ * http://stackoverflow.com/users/34441/ellisbben
+ * great solution to the problem!
+ */
+PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
+{
+	// build a little reference dictionary so if the font style has been used return a
+	// cached version...
+	var result = PIXI.Text.heightCache[fontStyle];
+	
+	if(!result)
+	{
+		var body = document.getElementsByTagName("body")[0];
+		var dummy = document.createElement("div");
+		var dummyText = document.createTextNode("M");
+		dummy.appendChild(dummyText);
+		dummy.setAttribute("style", fontStyle);
+		body.appendChild(dummy);
+		
+		result = dummy.offsetHeight;
+		PIXI.Text.heightCache[fontStyle] = result;
+		
+		body.removeChild(dummy);
+	}
+	
+	return result;
+};
+
+PIXI.Text.prototype.destroy = function(destroyTexture)
+{
+	if(destroyTexture)
+	{
+		this.texture.destroy();
+	}
+		
+};
+
+PIXI.Text.heightCache = {};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_textures_BaseTexture.js.html b/docs/files/src_pixi_textures_BaseTexture.js.html index a7d8f96..31917f0 100644 --- a/docs/files/src_pixi_textures_BaseTexture.js.html +++ b/docs/files/src_pixi_textures_BaseTexture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_textures_Texture.js.html b/docs/files/src_pixi_textures_Texture.js.html index 35f12dc..ca52cac 100644 --- a/docs/files/src_pixi_textures_Texture.js.html +++ b/docs/files/src_pixi_textures_Texture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_Detector.js.html b/docs/files/src_pixi_utils_Detector.js.html index 6b7d031..62cc770 100644 --- a/docs/files/src_pixi_utils_Detector.js.html +++ b/docs/files/src_pixi_utils_Detector.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_EventTarget.js.html b/docs/files/src_pixi_utils_EventTarget.js.html index 929e6eb..7a794c3 100644 --- a/docs/files/src_pixi_utils_EventTarget.js.html +++ b/docs/files/src_pixi_utils_EventTarget.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_Utils.js.html b/docs/files/src_pixi_utils_Utils.js.html index c6b3b43..e46f12a 100644 --- a/docs/files/src_pixi_utils_Utils.js.html +++ b/docs/files/src_pixi_utils_Utils.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Text.js.html b/docs/files/src_pixi_Text.js.html deleted file mode 100644 index 33b7cf2..0000000 --- a/docs/files/src_pixi_Text.js.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - src/pixi/Text.js - Pixi.JS - - - - - - - - -
    -
    -
    - -

    - -
    -
    - API Docs for: 1.0.0 -
    -
    -
    - -
    - -
    -
    -
    - Show: - - - - - - - -
    - - -
    -
    -
    -

    File: src/pixi/Text.js

    - -
    - 
    -/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * A Text Object will create a line of text
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.canvas = document.createElement("canvas");
-	
-	this.context = this.canvas.getContext("2d");
-	//document.body.appendChild(this.canvas);
-	this.setText(text);
-	this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
-	
-	this.updateText();
-	
-	PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
-	
-	// need to store a canvas that can
-}
-
-// constructor
-PIXI.Text.constructor = PIXI.Text;
-PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
-
-/**
- * Set the copy for the text object
- * @methos setText
- * @param text {String} The copy that you would like the text to display
- */
-PIXI.Text.prototype.setText = function(text)
-{
-	this.text = text || " ";
-	this.dirty = true;
-}
-
-/**
- * Set the style of the text
- * @method setStyle
- * @constructor
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.fontStyle = fontStyle || "bold 20pt Arial";
-	this.fillStyle = fillStyle;
-	this.strokeStyle = strokeStyle;
-	this.strokeThickness = strokeThickness || 0;
-	
-	this.dirty = true;
-}
-
-/**
- * @private
- */
-PIXI.Text.prototype.updateText = function()
-{
-//	console.log(this.text);
-	this.context.font = this.fontStyle;
-		
-	this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
-	this.canvas.height = this.determineFontHeight("font: " + this.fontStyle  + ";")+ this.strokeThickness;// textDimensions.height;
-
-	this.context.fillStyle = this.fillStyle;
-	this.context.font = this.fontStyle;
-	
-    this.context.strokeStyle = this.strokeStyle;
-	this.context.lineWidth = this.strokeThickness;
-
-	this.context.textBaseline="top"; 
-
-    if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	
-	
-//	console.log("//")
-}
-
-PIXI.Text.prototype.updateTransform = function()
-{
-	if(this.dirty)
-	{
-		this.updateText();	
-		
-		// update the texture..
-		this.texture.baseTexture.width = this.canvas.width;
-		this.texture.baseTexture.height = this.canvas.height;
-		this.texture.frame.width = this.canvas.width;
-		this.texture.frame.height = this.canvas.height;
-		
-		PIXI.texturesToUpdate.push(this.texture.baseTexture);
-		this.dirty = false;
-	}
-	
-	PIXI.Sprite.prototype.updateTransform.call( this );
-}
-
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
-{
-	// build a little refference dictionary so if the font style has been used return a
-	// cached version...
-	var result = PIXI.Text.heightCache[fontStyle]
-	
-	if(!result)
-	{
-		var body = document.getElementsByTagName("body")[0];
-		var dummy = document.createElement("div");
-		var dummyText = document.createTextNode("M");
-		dummy.appendChild(dummyText);
-		dummy.setAttribute("style", fontStyle);
-		body.appendChild(dummy);
-		
-		result = dummy.offsetHeight;
-		PIXI.Text.heightCache[fontStyle] = result
-		
-		body.removeChild(dummy);
-	}
-	
-	return result;
-};
-
-PIXI.Text.prototype.destroy = function(destroyTexture)
-{
-	if(destroyTexture)
-	{
-		this.texture.destroy();
-	}
-		
-}
-
-PIXI.Text.heightCache = {};
-
-
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - diff --git a/docs/files/src_pixi_extras_Rope.js.html b/docs/files/src_pixi_extras_Rope.js.html index 7e2ceff..219f049 100644 --- a/docs/files/src_pixi_extras_Rope.js.html +++ b/docs/files/src_pixi_extras_Rope.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_Strip.js.html b/docs/files/src_pixi_extras_Strip.js.html index 8f748c2..a7a64cd 100644 --- a/docs/files/src_pixi_extras_Strip.js.html +++ b/docs/files/src_pixi_extras_Strip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_TilingSprite.js.html b/docs/files/src_pixi_extras_TilingSprite.js.html index af3d84d..b61c15f 100644 --- a/docs/files/src_pixi_extras_TilingSprite.js.html +++ b/docs/files/src_pixi_extras_TilingSprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_loaders_AssetLoader.js.html b/docs/files/src_pixi_loaders_AssetLoader.js.html index 089d5cf..594481e 100644 --- a/docs/files/src_pixi_loaders_AssetLoader.js.html +++ b/docs/files/src_pixi_loaders_AssetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -127,17 +133,17 @@ */ /** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -145,11 +151,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -169,105 +183,45 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; diff --git a/docs/files/src_pixi_loaders_BitmapFontLoader.js.html b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html new file mode 100644 index 0000000..6fd5d80 --- /dev/null +++ b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html @@ -0,0 +1,275 @@ + + + + + src/pixi/loaders/BitmapFontLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/BitmapFontLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The xml loader is used to load in XML bitmap font data ("xml" or "fnt")
+ * To generate the data you can use http://www.angelcode.com/products/bmfont/
+ * This loader will also load the image file as the data.
+ * When loaded this class will dispatch a "loaded" event
+ * @class BitmapFontLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url the url of the sprite sheet JSON file
+ * @param {Boolean} crossorigin
+ */
+
+PIXI.BitmapFontLoader = function(url, crossorigin)
+{
+    /*
+     * i use texture packer to load the assets..
+     * http://www.codeandweb.com/texturepacker
+     * make sure to set the format as "JSON"
+     */
+    PIXI.EventTarget.call(this);
+    this.url = url;
+    this.baseUrl = url.replace(/[^\/]*$/, "");
+    this.texture = null;
+    this.crossorigin = crossorigin;
+};
+
+// constructor
+PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader;
+
+/**
+ * This will begin loading the JSON file
+ */
+PIXI.BitmapFontLoader.prototype.load = function()
+{
+    this.ajaxRequest = new XMLHttpRequest();
+    var scope = this;
+    this.ajaxRequest.onreadystatechange = function()
+    {
+        scope.onXMLLoaded();
+    };
+
+    this.ajaxRequest.open("GET", this.url, true);
+    if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml");
+    this.ajaxRequest.send(null)
+};
+
+/**
+ * Invoked when XML file is loaded
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
+{
+    if (this.ajaxRequest.readyState == 4)
+    {
+        if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1)
+        {
+            var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue;
+            var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
+            this.texture = image.texture.baseTexture;
+
+            var data = {};
+            var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0];
+            var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0];
+            data.font = info.attributes.getNamedItem("face").nodeValue;
+            data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10);
+            data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10);
+            data.chars = {};
+
+            //parse letters
+            var letters = this.ajaxRequest.responseXML.getElementsByTagName("char");
+
+            for (var i = 0; i < letters.length; i++)
+            {
+                var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10);
+
+                var textureRect = {
+                    x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10),
+                    y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10),
+                    width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10),
+                    height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10)
+                };
+                PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect);
+
+                data.chars[charCode] = {
+                    xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10),
+                    yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10),
+                    xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10),
+                    kerning: {}
+                };
+            }
+
+            //parse kernings
+            var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning");
+            for (i = 0; i < kernings.length; i++)
+            {
+               var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10);
+               var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10);
+               var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10);
+
+                data.chars[second].kerning[first] = amount;
+
+            }
+            PIXI.BitmapText.fonts[data.font] = data;
+
+            var scope = this;
+            image.addEventListener("loaded", function() {
+                scope.onLoaded();
+            });
+            image.load();
+        }
+    }
+};
+
+/**
+ * Invoked when all files are loaded (xml/fnt and texture)
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_ImageLoader.js.html b/docs/files/src_pixi_loaders_ImageLoader.js.html new file mode 100644 index 0000000..f6fcf07 --- /dev/null +++ b/docs/files/src_pixi_loaders_ImageLoader.js.html @@ -0,0 +1,200 @@ + + + + + src/pixi/loaders/ImageLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/ImageLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif")
+ * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
+ * When loaded this class will dispatch a 'loaded' event
+ * @class ImageLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url The url of the image
+ * @param {Boolean} crossorigin
+ */
+PIXI.ImageLoader = function(url, crossorigin)
+{
+    PIXI.EventTarget.call(this);
+    this.texture = PIXI.Texture.fromImage(url, crossorigin);
+};
+
+// constructor
+PIXI.ImageLoader.constructor = PIXI.ImageLoader;
+
+/**
+ * Loads image or takes it from cache
+ */
+PIXI.ImageLoader.prototype.load = function()
+{
+    if(!this.texture.baseTexture.hasLoaded)
+    {
+        var scope = this;
+        this.texture.baseTexture.addEventListener("loaded", function()
+        {
+            scope.onLoaded();
+        });
+    }
+    else
+    {
+        this.onLoaded();
+    }
+};
+
+/**
+ * Invoked when image file is loaded or it is already cached and ready to use
+ * @private
+ */
+PIXI.ImageLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 5510866..3b14d2f 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,30 +136,31 @@ * The sprite sheet loader is used to load in JSON sprite sheet data * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event + * When loaded this class will dispatch a "loaded" event * @class SpriteSheetLoader * @extends EventTarget * @constructor - * @param url {String} the url of the sprite sheet JSON file + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin */ -PIXI.SpriteSheetLoader = function(url) +PIXI.SpriteSheetLoader = function(url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker * make sure to set the format as "JSON" */ - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; this.frames = {}; - this.crossorigin = false; -} + this.crossorigin = crossorigin; +}; // constructor PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; @@ -165,32 +172,38 @@ { this.ajaxRequest = new AjaxRequest(); var scope = this; - this.ajaxRequest.onreadystatechange=function() + this.ajaxRequest.onreadystatechange = function() { - scope.onLoaded(); - } + scope.onJSONLoaded(); + }; - this.ajaxRequest.open("GET", this.url, true) + this.ajaxRequest.open("GET", this.url, true); if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); this.ajaxRequest.send(null) -} +}; -PIXI.SpriteSheetLoader.prototype.onLoaded = function() +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() { - if (this.ajaxRequest.readyState==4) + if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) { var rect = frameData[i].frame; if (rect) @@ -201,32 +214,24 @@ { //var realSize = frameData[i].spriteSourceSize; PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + PIXI.TextureCache[i].trim.x = 0;// (realSize.x / rect.w) // calculate the offset! } - // this.frames[i] = ; } } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; diff --git a/docs/files/src_pixi_renderers_CanvasRenderer.js.html b/docs/files/src_pixi_renderers_CanvasRenderer.js.html index 5598bbd..0b91b46 100644 --- a/docs/files/src_pixi_renderers_CanvasRenderer.js.html +++ b/docs/files/src_pixi_renderers_CanvasRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLBatch.js.html b/docs/files/src_pixi_renderers_WebGLBatch.js.html index 17824ca..95b86b5 100644 --- a/docs/files/src_pixi_renderers_WebGLBatch.js.html +++ b/docs/files/src_pixi_renderers_WebGLBatch.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 0a39149..af0ce9f 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLShaders.js.html b/docs/files/src_pixi_renderers_WebGLShaders.js.html index 40ac3bd..bb52ff9 100644 --- a/docs/files/src_pixi_renderers_WebGLShaders.js.html +++ b/docs/files/src_pixi_renderers_WebGLShaders.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_text_BitmapText.js.html b/docs/files/src_pixi_text_BitmapText.js.html new file mode 100644 index 0000000..9fdae27 --- /dev/null +++ b/docs/files/src_pixi_text_BitmapText.js.html @@ -0,0 +1,306 @@ + + + + + src/pixi/text/BitmapText.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/BitmapText.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text using bitmap font 
+ * You can generate the fnt files using 
+ * http://www.angelcode.com/products/bmfont/ for windows of
+ * http://www.bmglyph.com/ for mac.
+ * @class BitmapText
+ * @extends DisplayObjectContainer
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously)
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+ //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font
+PIXI.BitmapText = function(text, style)
+{
+    PIXI.DisplayObjectContainer.call(this);
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false
+
+};
+
+// constructor
+PIXI.BitmapText.constructor = PIXI.BitmapText;
+PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);
+
+/**
+ * Set the copy for the text object
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.BitmapText.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+PIXI.BitmapText.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.align = style.align || "left";
+    this.style = style;
+
+    var font = style.font.split(" ");
+    this.fontName = font[font.length - 1];
+    this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size;
+
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.BitmapText.prototype.updateText = function()
+{
+    var data = PIXI.BitmapText.fonts[this.fontName];
+    var pos = new PIXI.Point();
+    var prevCharCode = null;
+    var chars = [];
+    var maxLineWidth = 0;
+    var lineWidths = [];
+    var line = 0;
+    var scale = this.fontSize / data.size;
+    for(var i = 0; i < this.text.length; i++)
+    {
+        var charCode = this.text.charCodeAt(i);
+        if(charCode == "\n".charCodeAt(0))
+        {
+            lineWidths.push(pos.x);
+            maxLineWidth = Math.max(maxLineWidth, pos.x);
+            line++;
+
+            pos.x = 0;
+            pos.y += data.lineHeight;
+            prevCharCode = null;
+            continue;
+        }
+        
+        var charData = data.chars[charCode];
+        if(!charData) continue;
+
+        if(prevCharCode && charData[prevCharCode])
+        {
+           pos.x += charData.kerning[prevCharCode];
+        }
+        chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)});
+        pos.x += charData.xAdvance;
+
+        prevCharCode = charCode;
+    }
+
+    lineWidths.push(pos.x);
+    maxLineWidth = Math.max(maxLineWidth, pos.x);
+
+    var lineAlignOffsets = [];
+    for(i = 0; i <= line; i++)
+    {
+        var alignOffset = 0;
+        if(this.style.align == "right")
+        {
+            alignOffset = maxLineWidth - lineWidths[i];
+        }
+        else if(this.style.align == "center")
+        {
+            alignOffset = (maxLineWidth - lineWidths[i]) / 2;
+        }
+        lineAlignOffsets.push(alignOffset);
+    }
+
+    for(i = 0; i < chars.length; i++)
+    {
+        var char = PIXI.Sprite.fromFrame(chars[i].charCode);
+        char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale;
+        char.position.y = chars[i].position.y * scale;
+        char.scale.x = char.scale.y = scale;
+        this.addChild(char);
+    }
+
+    this.width = pos.x * scale;
+    this.height = (pos.y + data.lineHeight) * scale;
+};
+
+/**
+ * @private
+ */
+PIXI.BitmapText.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+        while(this.children.length > 0)
+        {
+            this.removeChild(this.getChildAt(0));
+        }
+        this.updateText();
+
+        this.dirty = false;
+	}
+	
+	PIXI.DisplayObjectContainer.prototype.updateTransform.call(this);
+};
+
+PIXI.BitmapText.fonts = {};
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_text_Text.js.html b/docs/files/src_pixi_text_Text.js.html new file mode 100644 index 0000000..7933074 --- /dev/null +++ b/docs/files/src_pixi_text_Text.js.html @@ -0,0 +1,344 @@ + + + + + src/pixi/text/Text.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/Text.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text to split a line you can use "\n"
+ * @class Text
+ * @extends Sprite
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text = function(text, style)
+{
+    this.canvas = document.createElement("canvas");
+    this.context = this.canvas.getContext("2d");
+    PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas));
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false;
+};
+
+// constructor
+PIXI.Text.constructor = PIXI.Text;
+PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype);
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font="bold 20pt Arial"] The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.font = style.font || "bold 20pt Arial";
+    style.fill = style.fill || "black";
+    style.align = style.align || "left";
+    style.strokeThickness = style.strokeThickness || 0;
+    this.style = style;
+    this.dirty = true;
+};
+
+/**
+ * Set the copy for the text object. To split a line you can use "\n"
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.Sprite.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.Text.prototype.updateText = function()
+{
+	this.context.font = this.style.font;
+
+	//split text into lines
+	var lines = this.text.split("\n");
+
+	//calculate text width
+	var lineWidths = [];
+	var maxLineWidth = 0;
+	for (var i = 0; i < lines.length; i++)
+	{
+		var lineWidth = this.context.measureText(lines[i]).width;
+		lineWidths[i] = lineWidth;
+		maxLineWidth = Math.max(maxLineWidth, lineWidth);
+	}
+	this.canvas.width = maxLineWidth + this.style.strokeThickness;
+	
+	//calculate text height
+	var lineHeight = this.determineFontHeight("font: " + this.style.font  + ";") + this.style.strokeThickness;
+	this.canvas.height = lineHeight * lines.length;
+
+	//set canvas text styles
+	this.context.fillStyle = this.style.fill;
+	this.context.font = this.style.font;
+	
+	this.context.strokeStyle = this.style.stroke;
+	this.context.lineWidth = this.style.strokeThickness;
+
+	this.context.textBaseline = "top";
+
+	//draw lines line by line
+	for (i = 0; i < lines.length; i++)
+	{
+		var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight);
+	
+		if(this.style.align == "right")
+		{
+			linePosition.x += maxLineWidth - lineWidths[i];
+		}
+		else if(this.style.align == "center")
+		{
+			linePosition.x += (maxLineWidth - lineWidths[i]) / 2;
+		}
+
+		if(this.style.stroke && this.style.strokeThickness)
+		{
+			this.context.strokeText(lines[i], linePosition.x, linePosition.y);
+		}
+
+		if(this.style.fill)
+		{
+			this.context.fillText(lines[i], linePosition.x, linePosition.y);
+		}
+	}
+	
+    this.updateTexture();
+};
+
+/**
+ * Updates texture size based on canvas size
+ * @private
+ */
+PIXI.Text.prototype.updateTexture = function()
+{
+
+    this.texture.baseTexture.width = this.canvas.width;
+    this.texture.baseTexture.height = this.canvas.height;
+    this.texture.frame.width = this.canvas.width;
+    this.texture.frame.height = this.canvas.height;
+    PIXI.texturesToUpdate.push(this.texture.baseTexture);
+};
+
+/**
+ * @private
+ */
+PIXI.Text.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+		this.updateText();	
+		this.dirty = false;
+	}
+	
+	PIXI.Sprite.prototype.updateTransform.call(this);
+};
+
+/*
+ * http://stackoverflow.com/users/34441/ellisbben
+ * great solution to the problem!
+ */
+PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
+{
+	// build a little reference dictionary so if the font style has been used return a
+	// cached version...
+	var result = PIXI.Text.heightCache[fontStyle];
+	
+	if(!result)
+	{
+		var body = document.getElementsByTagName("body")[0];
+		var dummy = document.createElement("div");
+		var dummyText = document.createTextNode("M");
+		dummy.appendChild(dummyText);
+		dummy.setAttribute("style", fontStyle);
+		body.appendChild(dummy);
+		
+		result = dummy.offsetHeight;
+		PIXI.Text.heightCache[fontStyle] = result;
+		
+		body.removeChild(dummy);
+	}
+	
+	return result;
+};
+
+PIXI.Text.prototype.destroy = function(destroyTexture)
+{
+	if(destroyTexture)
+	{
+		this.texture.destroy();
+	}
+		
+};
+
+PIXI.Text.heightCache = {};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_textures_BaseTexture.js.html b/docs/files/src_pixi_textures_BaseTexture.js.html index a7d8f96..31917f0 100644 --- a/docs/files/src_pixi_textures_BaseTexture.js.html +++ b/docs/files/src_pixi_textures_BaseTexture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_textures_Texture.js.html b/docs/files/src_pixi_textures_Texture.js.html index 35f12dc..ca52cac 100644 --- a/docs/files/src_pixi_textures_Texture.js.html +++ b/docs/files/src_pixi_textures_Texture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_Detector.js.html b/docs/files/src_pixi_utils_Detector.js.html index 6b7d031..62cc770 100644 --- a/docs/files/src_pixi_utils_Detector.js.html +++ b/docs/files/src_pixi_utils_Detector.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_EventTarget.js.html b/docs/files/src_pixi_utils_EventTarget.js.html index 929e6eb..7a794c3 100644 --- a/docs/files/src_pixi_utils_EventTarget.js.html +++ b/docs/files/src_pixi_utils_EventTarget.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_Utils.js.html b/docs/files/src_pixi_utils_Utils.js.html index c6b3b43..e46f12a 100644 --- a/docs/files/src_pixi_utils_Utils.js.html +++ b/docs/files/src_pixi_utils_Utils.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/index.html b/docs/index.html index 36c00da..f277aae 100644 --- a/docs/index.html +++ b/docs/index.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Text.js.html b/docs/files/src_pixi_Text.js.html deleted file mode 100644 index 33b7cf2..0000000 --- a/docs/files/src_pixi_Text.js.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - src/pixi/Text.js - Pixi.JS - - - - - - - - -
    -
    -
    - -

    - -
    -
    - API Docs for: 1.0.0 -
    -
    -
    - -
    - -
    -
    -
    - Show: - - - - - - - -
    - - -
    -
    -
    -

    File: src/pixi/Text.js

    - -
    - 
    -/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * A Text Object will create a line of text
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.canvas = document.createElement("canvas");
-	
-	this.context = this.canvas.getContext("2d");
-	//document.body.appendChild(this.canvas);
-	this.setText(text);
-	this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
-	
-	this.updateText();
-	
-	PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
-	
-	// need to store a canvas that can
-}
-
-// constructor
-PIXI.Text.constructor = PIXI.Text;
-PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
-
-/**
- * Set the copy for the text object
- * @methos setText
- * @param text {String} The copy that you would like the text to display
- */
-PIXI.Text.prototype.setText = function(text)
-{
-	this.text = text || " ";
-	this.dirty = true;
-}
-
-/**
- * Set the style of the text
- * @method setStyle
- * @constructor
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.fontStyle = fontStyle || "bold 20pt Arial";
-	this.fillStyle = fillStyle;
-	this.strokeStyle = strokeStyle;
-	this.strokeThickness = strokeThickness || 0;
-	
-	this.dirty = true;
-}
-
-/**
- * @private
- */
-PIXI.Text.prototype.updateText = function()
-{
-//	console.log(this.text);
-	this.context.font = this.fontStyle;
-		
-	this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
-	this.canvas.height = this.determineFontHeight("font: " + this.fontStyle  + ";")+ this.strokeThickness;// textDimensions.height;
-
-	this.context.fillStyle = this.fillStyle;
-	this.context.font = this.fontStyle;
-	
-    this.context.strokeStyle = this.strokeStyle;
-	this.context.lineWidth = this.strokeThickness;
-
-	this.context.textBaseline="top"; 
-
-    if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	
-	
-//	console.log("//")
-}
-
-PIXI.Text.prototype.updateTransform = function()
-{
-	if(this.dirty)
-	{
-		this.updateText();	
-		
-		// update the texture..
-		this.texture.baseTexture.width = this.canvas.width;
-		this.texture.baseTexture.height = this.canvas.height;
-		this.texture.frame.width = this.canvas.width;
-		this.texture.frame.height = this.canvas.height;
-		
-		PIXI.texturesToUpdate.push(this.texture.baseTexture);
-		this.dirty = false;
-	}
-	
-	PIXI.Sprite.prototype.updateTransform.call( this );
-}
-
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
-{
-	// build a little refference dictionary so if the font style has been used return a
-	// cached version...
-	var result = PIXI.Text.heightCache[fontStyle]
-	
-	if(!result)
-	{
-		var body = document.getElementsByTagName("body")[0];
-		var dummy = document.createElement("div");
-		var dummyText = document.createTextNode("M");
-		dummy.appendChild(dummyText);
-		dummy.setAttribute("style", fontStyle);
-		body.appendChild(dummy);
-		
-		result = dummy.offsetHeight;
-		PIXI.Text.heightCache[fontStyle] = result
-		
-		body.removeChild(dummy);
-	}
-	
-	return result;
-};
-
-PIXI.Text.prototype.destroy = function(destroyTexture)
-{
-	if(destroyTexture)
-	{
-		this.texture.destroy();
-	}
-		
-}
-
-PIXI.Text.heightCache = {};
-
-
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - diff --git a/docs/files/src_pixi_extras_Rope.js.html b/docs/files/src_pixi_extras_Rope.js.html index 7e2ceff..219f049 100644 --- a/docs/files/src_pixi_extras_Rope.js.html +++ b/docs/files/src_pixi_extras_Rope.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_Strip.js.html b/docs/files/src_pixi_extras_Strip.js.html index 8f748c2..a7a64cd 100644 --- a/docs/files/src_pixi_extras_Strip.js.html +++ b/docs/files/src_pixi_extras_Strip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_TilingSprite.js.html b/docs/files/src_pixi_extras_TilingSprite.js.html index af3d84d..b61c15f 100644 --- a/docs/files/src_pixi_extras_TilingSprite.js.html +++ b/docs/files/src_pixi_extras_TilingSprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_loaders_AssetLoader.js.html b/docs/files/src_pixi_loaders_AssetLoader.js.html index 089d5cf..594481e 100644 --- a/docs/files/src_pixi_loaders_AssetLoader.js.html +++ b/docs/files/src_pixi_loaders_AssetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -127,17 +133,17 @@ */ /** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -145,11 +151,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -169,105 +183,45 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; diff --git a/docs/files/src_pixi_loaders_BitmapFontLoader.js.html b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html new file mode 100644 index 0000000..6fd5d80 --- /dev/null +++ b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html @@ -0,0 +1,275 @@ + + + + + src/pixi/loaders/BitmapFontLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/BitmapFontLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The xml loader is used to load in XML bitmap font data ("xml" or "fnt")
+ * To generate the data you can use http://www.angelcode.com/products/bmfont/
+ * This loader will also load the image file as the data.
+ * When loaded this class will dispatch a "loaded" event
+ * @class BitmapFontLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url the url of the sprite sheet JSON file
+ * @param {Boolean} crossorigin
+ */
+
+PIXI.BitmapFontLoader = function(url, crossorigin)
+{
+    /*
+     * i use texture packer to load the assets..
+     * http://www.codeandweb.com/texturepacker
+     * make sure to set the format as "JSON"
+     */
+    PIXI.EventTarget.call(this);
+    this.url = url;
+    this.baseUrl = url.replace(/[^\/]*$/, "");
+    this.texture = null;
+    this.crossorigin = crossorigin;
+};
+
+// constructor
+PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader;
+
+/**
+ * This will begin loading the JSON file
+ */
+PIXI.BitmapFontLoader.prototype.load = function()
+{
+    this.ajaxRequest = new XMLHttpRequest();
+    var scope = this;
+    this.ajaxRequest.onreadystatechange = function()
+    {
+        scope.onXMLLoaded();
+    };
+
+    this.ajaxRequest.open("GET", this.url, true);
+    if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml");
+    this.ajaxRequest.send(null)
+};
+
+/**
+ * Invoked when XML file is loaded
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
+{
+    if (this.ajaxRequest.readyState == 4)
+    {
+        if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1)
+        {
+            var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue;
+            var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
+            this.texture = image.texture.baseTexture;
+
+            var data = {};
+            var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0];
+            var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0];
+            data.font = info.attributes.getNamedItem("face").nodeValue;
+            data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10);
+            data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10);
+            data.chars = {};
+
+            //parse letters
+            var letters = this.ajaxRequest.responseXML.getElementsByTagName("char");
+
+            for (var i = 0; i < letters.length; i++)
+            {
+                var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10);
+
+                var textureRect = {
+                    x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10),
+                    y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10),
+                    width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10),
+                    height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10)
+                };
+                PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect);
+
+                data.chars[charCode] = {
+                    xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10),
+                    yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10),
+                    xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10),
+                    kerning: {}
+                };
+            }
+
+            //parse kernings
+            var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning");
+            for (i = 0; i < kernings.length; i++)
+            {
+               var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10);
+               var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10);
+               var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10);
+
+                data.chars[second].kerning[first] = amount;
+
+            }
+            PIXI.BitmapText.fonts[data.font] = data;
+
+            var scope = this;
+            image.addEventListener("loaded", function() {
+                scope.onLoaded();
+            });
+            image.load();
+        }
+    }
+};
+
+/**
+ * Invoked when all files are loaded (xml/fnt and texture)
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_ImageLoader.js.html b/docs/files/src_pixi_loaders_ImageLoader.js.html new file mode 100644 index 0000000..f6fcf07 --- /dev/null +++ b/docs/files/src_pixi_loaders_ImageLoader.js.html @@ -0,0 +1,200 @@ + + + + + src/pixi/loaders/ImageLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/ImageLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif")
+ * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
+ * When loaded this class will dispatch a 'loaded' event
+ * @class ImageLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url The url of the image
+ * @param {Boolean} crossorigin
+ */
+PIXI.ImageLoader = function(url, crossorigin)
+{
+    PIXI.EventTarget.call(this);
+    this.texture = PIXI.Texture.fromImage(url, crossorigin);
+};
+
+// constructor
+PIXI.ImageLoader.constructor = PIXI.ImageLoader;
+
+/**
+ * Loads image or takes it from cache
+ */
+PIXI.ImageLoader.prototype.load = function()
+{
+    if(!this.texture.baseTexture.hasLoaded)
+    {
+        var scope = this;
+        this.texture.baseTexture.addEventListener("loaded", function()
+        {
+            scope.onLoaded();
+        });
+    }
+    else
+    {
+        this.onLoaded();
+    }
+};
+
+/**
+ * Invoked when image file is loaded or it is already cached and ready to use
+ * @private
+ */
+PIXI.ImageLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 5510866..3b14d2f 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,30 +136,31 @@ * The sprite sheet loader is used to load in JSON sprite sheet data * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event + * When loaded this class will dispatch a "loaded" event * @class SpriteSheetLoader * @extends EventTarget * @constructor - * @param url {String} the url of the sprite sheet JSON file + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin */ -PIXI.SpriteSheetLoader = function(url) +PIXI.SpriteSheetLoader = function(url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker * make sure to set the format as "JSON" */ - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; this.frames = {}; - this.crossorigin = false; -} + this.crossorigin = crossorigin; +}; // constructor PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; @@ -165,32 +172,38 @@ { this.ajaxRequest = new AjaxRequest(); var scope = this; - this.ajaxRequest.onreadystatechange=function() + this.ajaxRequest.onreadystatechange = function() { - scope.onLoaded(); - } + scope.onJSONLoaded(); + }; - this.ajaxRequest.open("GET", this.url, true) + this.ajaxRequest.open("GET", this.url, true); if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); this.ajaxRequest.send(null) -} +}; -PIXI.SpriteSheetLoader.prototype.onLoaded = function() +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() { - if (this.ajaxRequest.readyState==4) + if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) { var rect = frameData[i].frame; if (rect) @@ -201,32 +214,24 @@ { //var realSize = frameData[i].spriteSourceSize; PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + PIXI.TextureCache[i].trim.x = 0;// (realSize.x / rect.w) // calculate the offset! } - // this.frames[i] = ; } } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; diff --git a/docs/files/src_pixi_renderers_CanvasRenderer.js.html b/docs/files/src_pixi_renderers_CanvasRenderer.js.html index 5598bbd..0b91b46 100644 --- a/docs/files/src_pixi_renderers_CanvasRenderer.js.html +++ b/docs/files/src_pixi_renderers_CanvasRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLBatch.js.html b/docs/files/src_pixi_renderers_WebGLBatch.js.html index 17824ca..95b86b5 100644 --- a/docs/files/src_pixi_renderers_WebGLBatch.js.html +++ b/docs/files/src_pixi_renderers_WebGLBatch.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 0a39149..af0ce9f 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLShaders.js.html b/docs/files/src_pixi_renderers_WebGLShaders.js.html index 40ac3bd..bb52ff9 100644 --- a/docs/files/src_pixi_renderers_WebGLShaders.js.html +++ b/docs/files/src_pixi_renderers_WebGLShaders.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_text_BitmapText.js.html b/docs/files/src_pixi_text_BitmapText.js.html new file mode 100644 index 0000000..9fdae27 --- /dev/null +++ b/docs/files/src_pixi_text_BitmapText.js.html @@ -0,0 +1,306 @@ + + + + + src/pixi/text/BitmapText.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/BitmapText.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text using bitmap font 
+ * You can generate the fnt files using 
+ * http://www.angelcode.com/products/bmfont/ for windows of
+ * http://www.bmglyph.com/ for mac.
+ * @class BitmapText
+ * @extends DisplayObjectContainer
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously)
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+ //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font
+PIXI.BitmapText = function(text, style)
+{
+    PIXI.DisplayObjectContainer.call(this);
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false
+
+};
+
+// constructor
+PIXI.BitmapText.constructor = PIXI.BitmapText;
+PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);
+
+/**
+ * Set the copy for the text object
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.BitmapText.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+PIXI.BitmapText.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.align = style.align || "left";
+    this.style = style;
+
+    var font = style.font.split(" ");
+    this.fontName = font[font.length - 1];
+    this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size;
+
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.BitmapText.prototype.updateText = function()
+{
+    var data = PIXI.BitmapText.fonts[this.fontName];
+    var pos = new PIXI.Point();
+    var prevCharCode = null;
+    var chars = [];
+    var maxLineWidth = 0;
+    var lineWidths = [];
+    var line = 0;
+    var scale = this.fontSize / data.size;
+    for(var i = 0; i < this.text.length; i++)
+    {
+        var charCode = this.text.charCodeAt(i);
+        if(charCode == "\n".charCodeAt(0))
+        {
+            lineWidths.push(pos.x);
+            maxLineWidth = Math.max(maxLineWidth, pos.x);
+            line++;
+
+            pos.x = 0;
+            pos.y += data.lineHeight;
+            prevCharCode = null;
+            continue;
+        }
+        
+        var charData = data.chars[charCode];
+        if(!charData) continue;
+
+        if(prevCharCode && charData[prevCharCode])
+        {
+           pos.x += charData.kerning[prevCharCode];
+        }
+        chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)});
+        pos.x += charData.xAdvance;
+
+        prevCharCode = charCode;
+    }
+
+    lineWidths.push(pos.x);
+    maxLineWidth = Math.max(maxLineWidth, pos.x);
+
+    var lineAlignOffsets = [];
+    for(i = 0; i <= line; i++)
+    {
+        var alignOffset = 0;
+        if(this.style.align == "right")
+        {
+            alignOffset = maxLineWidth - lineWidths[i];
+        }
+        else if(this.style.align == "center")
+        {
+            alignOffset = (maxLineWidth - lineWidths[i]) / 2;
+        }
+        lineAlignOffsets.push(alignOffset);
+    }
+
+    for(i = 0; i < chars.length; i++)
+    {
+        var char = PIXI.Sprite.fromFrame(chars[i].charCode);
+        char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale;
+        char.position.y = chars[i].position.y * scale;
+        char.scale.x = char.scale.y = scale;
+        this.addChild(char);
+    }
+
+    this.width = pos.x * scale;
+    this.height = (pos.y + data.lineHeight) * scale;
+};
+
+/**
+ * @private
+ */
+PIXI.BitmapText.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+        while(this.children.length > 0)
+        {
+            this.removeChild(this.getChildAt(0));
+        }
+        this.updateText();
+
+        this.dirty = false;
+	}
+	
+	PIXI.DisplayObjectContainer.prototype.updateTransform.call(this);
+};
+
+PIXI.BitmapText.fonts = {};
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_text_Text.js.html b/docs/files/src_pixi_text_Text.js.html new file mode 100644 index 0000000..7933074 --- /dev/null +++ b/docs/files/src_pixi_text_Text.js.html @@ -0,0 +1,344 @@ + + + + + src/pixi/text/Text.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/Text.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text to split a line you can use "\n"
+ * @class Text
+ * @extends Sprite
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text = function(text, style)
+{
+    this.canvas = document.createElement("canvas");
+    this.context = this.canvas.getContext("2d");
+    PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas));
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false;
+};
+
+// constructor
+PIXI.Text.constructor = PIXI.Text;
+PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype);
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font="bold 20pt Arial"] The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.font = style.font || "bold 20pt Arial";
+    style.fill = style.fill || "black";
+    style.align = style.align || "left";
+    style.strokeThickness = style.strokeThickness || 0;
+    this.style = style;
+    this.dirty = true;
+};
+
+/**
+ * Set the copy for the text object. To split a line you can use "\n"
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.Sprite.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.Text.prototype.updateText = function()
+{
+	this.context.font = this.style.font;
+
+	//split text into lines
+	var lines = this.text.split("\n");
+
+	//calculate text width
+	var lineWidths = [];
+	var maxLineWidth = 0;
+	for (var i = 0; i < lines.length; i++)
+	{
+		var lineWidth = this.context.measureText(lines[i]).width;
+		lineWidths[i] = lineWidth;
+		maxLineWidth = Math.max(maxLineWidth, lineWidth);
+	}
+	this.canvas.width = maxLineWidth + this.style.strokeThickness;
+	
+	//calculate text height
+	var lineHeight = this.determineFontHeight("font: " + this.style.font  + ";") + this.style.strokeThickness;
+	this.canvas.height = lineHeight * lines.length;
+
+	//set canvas text styles
+	this.context.fillStyle = this.style.fill;
+	this.context.font = this.style.font;
+	
+	this.context.strokeStyle = this.style.stroke;
+	this.context.lineWidth = this.style.strokeThickness;
+
+	this.context.textBaseline = "top";
+
+	//draw lines line by line
+	for (i = 0; i < lines.length; i++)
+	{
+		var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight);
+	
+		if(this.style.align == "right")
+		{
+			linePosition.x += maxLineWidth - lineWidths[i];
+		}
+		else if(this.style.align == "center")
+		{
+			linePosition.x += (maxLineWidth - lineWidths[i]) / 2;
+		}
+
+		if(this.style.stroke && this.style.strokeThickness)
+		{
+			this.context.strokeText(lines[i], linePosition.x, linePosition.y);
+		}
+
+		if(this.style.fill)
+		{
+			this.context.fillText(lines[i], linePosition.x, linePosition.y);
+		}
+	}
+	
+    this.updateTexture();
+};
+
+/**
+ * Updates texture size based on canvas size
+ * @private
+ */
+PIXI.Text.prototype.updateTexture = function()
+{
+
+    this.texture.baseTexture.width = this.canvas.width;
+    this.texture.baseTexture.height = this.canvas.height;
+    this.texture.frame.width = this.canvas.width;
+    this.texture.frame.height = this.canvas.height;
+    PIXI.texturesToUpdate.push(this.texture.baseTexture);
+};
+
+/**
+ * @private
+ */
+PIXI.Text.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+		this.updateText();	
+		this.dirty = false;
+	}
+	
+	PIXI.Sprite.prototype.updateTransform.call(this);
+};
+
+/*
+ * http://stackoverflow.com/users/34441/ellisbben
+ * great solution to the problem!
+ */
+PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
+{
+	// build a little reference dictionary so if the font style has been used return a
+	// cached version...
+	var result = PIXI.Text.heightCache[fontStyle];
+	
+	if(!result)
+	{
+		var body = document.getElementsByTagName("body")[0];
+		var dummy = document.createElement("div");
+		var dummyText = document.createTextNode("M");
+		dummy.appendChild(dummyText);
+		dummy.setAttribute("style", fontStyle);
+		body.appendChild(dummy);
+		
+		result = dummy.offsetHeight;
+		PIXI.Text.heightCache[fontStyle] = result;
+		
+		body.removeChild(dummy);
+	}
+	
+	return result;
+};
+
+PIXI.Text.prototype.destroy = function(destroyTexture)
+{
+	if(destroyTexture)
+	{
+		this.texture.destroy();
+	}
+		
+};
+
+PIXI.Text.heightCache = {};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_textures_BaseTexture.js.html b/docs/files/src_pixi_textures_BaseTexture.js.html index a7d8f96..31917f0 100644 --- a/docs/files/src_pixi_textures_BaseTexture.js.html +++ b/docs/files/src_pixi_textures_BaseTexture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_textures_Texture.js.html b/docs/files/src_pixi_textures_Texture.js.html index 35f12dc..ca52cac 100644 --- a/docs/files/src_pixi_textures_Texture.js.html +++ b/docs/files/src_pixi_textures_Texture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_Detector.js.html b/docs/files/src_pixi_utils_Detector.js.html index 6b7d031..62cc770 100644 --- a/docs/files/src_pixi_utils_Detector.js.html +++ b/docs/files/src_pixi_utils_Detector.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_EventTarget.js.html b/docs/files/src_pixi_utils_EventTarget.js.html index 929e6eb..7a794c3 100644 --- a/docs/files/src_pixi_utils_EventTarget.js.html +++ b/docs/files/src_pixi_utils_EventTarget.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_Utils.js.html b/docs/files/src_pixi_utils_Utils.js.html index c6b3b43..e46f12a 100644 --- a/docs/files/src_pixi_utils_Utils.js.html +++ b/docs/files/src_pixi_utils_Utils.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/index.html b/docs/index.html index 36c00da..f277aae 100644 --- a/docs/index.html +++ b/docs/index.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/modules/PIXI.html b/docs/modules/PIXI.html index 3cf7051..d3a42e3 100644 --- a/docs/modules/PIXI.html +++ b/docs/modules/PIXI.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -126,7 +132,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/Stage.js:5
    @@ -161,6 +167,18 @@
  • + + BitmapFontLoader + +
    • + +
  • + + BitmapText + +
    • + +
  • CanvasRenderer @@ -179,6 +197,12 @@
  • + + ImageLoader + +
    • + +
  • InteractionData diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Text.js.html b/docs/files/src_pixi_Text.js.html deleted file mode 100644 index 33b7cf2..0000000 --- a/docs/files/src_pixi_Text.js.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - src/pixi/Text.js - Pixi.JS - - - - - - - - -
    -
    -
    - -

    - -
    -
    - API Docs for: 1.0.0 -
    -
    -
    - -
    - -
    -
    -
    - Show: - - - - - - - -
    - - -
    -
    -
    -

    File: src/pixi/Text.js

    - -
    - 
    -/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * A Text Object will create a line of text
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.canvas = document.createElement("canvas");
-	
-	this.context = this.canvas.getContext("2d");
-	//document.body.appendChild(this.canvas);
-	this.setText(text);
-	this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
-	
-	this.updateText();
-	
-	PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
-	
-	// need to store a canvas that can
-}
-
-// constructor
-PIXI.Text.constructor = PIXI.Text;
-PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
-
-/**
- * Set the copy for the text object
- * @methos setText
- * @param text {String} The copy that you would like the text to display
- */
-PIXI.Text.prototype.setText = function(text)
-{
-	this.text = text || " ";
-	this.dirty = true;
-}
-
-/**
- * Set the style of the text
- * @method setStyle
- * @constructor
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.fontStyle = fontStyle || "bold 20pt Arial";
-	this.fillStyle = fillStyle;
-	this.strokeStyle = strokeStyle;
-	this.strokeThickness = strokeThickness || 0;
-	
-	this.dirty = true;
-}
-
-/**
- * @private
- */
-PIXI.Text.prototype.updateText = function()
-{
-//	console.log(this.text);
-	this.context.font = this.fontStyle;
-		
-	this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
-	this.canvas.height = this.determineFontHeight("font: " + this.fontStyle  + ";")+ this.strokeThickness;// textDimensions.height;
-
-	this.context.fillStyle = this.fillStyle;
-	this.context.font = this.fontStyle;
-	
-    this.context.strokeStyle = this.strokeStyle;
-	this.context.lineWidth = this.strokeThickness;
-
-	this.context.textBaseline="top"; 
-
-    if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	
-	
-//	console.log("//")
-}
-
-PIXI.Text.prototype.updateTransform = function()
-{
-	if(this.dirty)
-	{
-		this.updateText();	
-		
-		// update the texture..
-		this.texture.baseTexture.width = this.canvas.width;
-		this.texture.baseTexture.height = this.canvas.height;
-		this.texture.frame.width = this.canvas.width;
-		this.texture.frame.height = this.canvas.height;
-		
-		PIXI.texturesToUpdate.push(this.texture.baseTexture);
-		this.dirty = false;
-	}
-	
-	PIXI.Sprite.prototype.updateTransform.call( this );
-}
-
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
-{
-	// build a little refference dictionary so if the font style has been used return a
-	// cached version...
-	var result = PIXI.Text.heightCache[fontStyle]
-	
-	if(!result)
-	{
-		var body = document.getElementsByTagName("body")[0];
-		var dummy = document.createElement("div");
-		var dummyText = document.createTextNode("M");
-		dummy.appendChild(dummyText);
-		dummy.setAttribute("style", fontStyle);
-		body.appendChild(dummy);
-		
-		result = dummy.offsetHeight;
-		PIXI.Text.heightCache[fontStyle] = result
-		
-		body.removeChild(dummy);
-	}
-	
-	return result;
-};
-
-PIXI.Text.prototype.destroy = function(destroyTexture)
-{
-	if(destroyTexture)
-	{
-		this.texture.destroy();
-	}
-		
-}
-
-PIXI.Text.heightCache = {};
-
-
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - diff --git a/docs/files/src_pixi_extras_Rope.js.html b/docs/files/src_pixi_extras_Rope.js.html index 7e2ceff..219f049 100644 --- a/docs/files/src_pixi_extras_Rope.js.html +++ b/docs/files/src_pixi_extras_Rope.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_Strip.js.html b/docs/files/src_pixi_extras_Strip.js.html index 8f748c2..a7a64cd 100644 --- a/docs/files/src_pixi_extras_Strip.js.html +++ b/docs/files/src_pixi_extras_Strip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_TilingSprite.js.html b/docs/files/src_pixi_extras_TilingSprite.js.html index af3d84d..b61c15f 100644 --- a/docs/files/src_pixi_extras_TilingSprite.js.html +++ b/docs/files/src_pixi_extras_TilingSprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_loaders_AssetLoader.js.html b/docs/files/src_pixi_loaders_AssetLoader.js.html index 089d5cf..594481e 100644 --- a/docs/files/src_pixi_loaders_AssetLoader.js.html +++ b/docs/files/src_pixi_loaders_AssetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -127,17 +133,17 @@ */ /** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -145,11 +151,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -169,105 +183,45 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; diff --git a/docs/files/src_pixi_loaders_BitmapFontLoader.js.html b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html new file mode 100644 index 0000000..6fd5d80 --- /dev/null +++ b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html @@ -0,0 +1,275 @@ + + + + + src/pixi/loaders/BitmapFontLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/BitmapFontLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The xml loader is used to load in XML bitmap font data ("xml" or "fnt")
+ * To generate the data you can use http://www.angelcode.com/products/bmfont/
+ * This loader will also load the image file as the data.
+ * When loaded this class will dispatch a "loaded" event
+ * @class BitmapFontLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url the url of the sprite sheet JSON file
+ * @param {Boolean} crossorigin
+ */
+
+PIXI.BitmapFontLoader = function(url, crossorigin)
+{
+    /*
+     * i use texture packer to load the assets..
+     * http://www.codeandweb.com/texturepacker
+     * make sure to set the format as "JSON"
+     */
+    PIXI.EventTarget.call(this);
+    this.url = url;
+    this.baseUrl = url.replace(/[^\/]*$/, "");
+    this.texture = null;
+    this.crossorigin = crossorigin;
+};
+
+// constructor
+PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader;
+
+/**
+ * This will begin loading the JSON file
+ */
+PIXI.BitmapFontLoader.prototype.load = function()
+{
+    this.ajaxRequest = new XMLHttpRequest();
+    var scope = this;
+    this.ajaxRequest.onreadystatechange = function()
+    {
+        scope.onXMLLoaded();
+    };
+
+    this.ajaxRequest.open("GET", this.url, true);
+    if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml");
+    this.ajaxRequest.send(null)
+};
+
+/**
+ * Invoked when XML file is loaded
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
+{
+    if (this.ajaxRequest.readyState == 4)
+    {
+        if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1)
+        {
+            var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue;
+            var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
+            this.texture = image.texture.baseTexture;
+
+            var data = {};
+            var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0];
+            var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0];
+            data.font = info.attributes.getNamedItem("face").nodeValue;
+            data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10);
+            data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10);
+            data.chars = {};
+
+            //parse letters
+            var letters = this.ajaxRequest.responseXML.getElementsByTagName("char");
+
+            for (var i = 0; i < letters.length; i++)
+            {
+                var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10);
+
+                var textureRect = {
+                    x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10),
+                    y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10),
+                    width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10),
+                    height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10)
+                };
+                PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect);
+
+                data.chars[charCode] = {
+                    xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10),
+                    yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10),
+                    xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10),
+                    kerning: {}
+                };
+            }
+
+            //parse kernings
+            var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning");
+            for (i = 0; i < kernings.length; i++)
+            {
+               var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10);
+               var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10);
+               var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10);
+
+                data.chars[second].kerning[first] = amount;
+
+            }
+            PIXI.BitmapText.fonts[data.font] = data;
+
+            var scope = this;
+            image.addEventListener("loaded", function() {
+                scope.onLoaded();
+            });
+            image.load();
+        }
+    }
+};
+
+/**
+ * Invoked when all files are loaded (xml/fnt and texture)
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_ImageLoader.js.html b/docs/files/src_pixi_loaders_ImageLoader.js.html new file mode 100644 index 0000000..f6fcf07 --- /dev/null +++ b/docs/files/src_pixi_loaders_ImageLoader.js.html @@ -0,0 +1,200 @@ + + + + + src/pixi/loaders/ImageLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/ImageLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif")
+ * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
+ * When loaded this class will dispatch a 'loaded' event
+ * @class ImageLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url The url of the image
+ * @param {Boolean} crossorigin
+ */
+PIXI.ImageLoader = function(url, crossorigin)
+{
+    PIXI.EventTarget.call(this);
+    this.texture = PIXI.Texture.fromImage(url, crossorigin);
+};
+
+// constructor
+PIXI.ImageLoader.constructor = PIXI.ImageLoader;
+
+/**
+ * Loads image or takes it from cache
+ */
+PIXI.ImageLoader.prototype.load = function()
+{
+    if(!this.texture.baseTexture.hasLoaded)
+    {
+        var scope = this;
+        this.texture.baseTexture.addEventListener("loaded", function()
+        {
+            scope.onLoaded();
+        });
+    }
+    else
+    {
+        this.onLoaded();
+    }
+};
+
+/**
+ * Invoked when image file is loaded or it is already cached and ready to use
+ * @private
+ */
+PIXI.ImageLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 5510866..3b14d2f 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,30 +136,31 @@ * The sprite sheet loader is used to load in JSON sprite sheet data * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event + * When loaded this class will dispatch a "loaded" event * @class SpriteSheetLoader * @extends EventTarget * @constructor - * @param url {String} the url of the sprite sheet JSON file + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin */ -PIXI.SpriteSheetLoader = function(url) +PIXI.SpriteSheetLoader = function(url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker * make sure to set the format as "JSON" */ - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; this.frames = {}; - this.crossorigin = false; -} + this.crossorigin = crossorigin; +}; // constructor PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; @@ -165,32 +172,38 @@ { this.ajaxRequest = new AjaxRequest(); var scope = this; - this.ajaxRequest.onreadystatechange=function() + this.ajaxRequest.onreadystatechange = function() { - scope.onLoaded(); - } + scope.onJSONLoaded(); + }; - this.ajaxRequest.open("GET", this.url, true) + this.ajaxRequest.open("GET", this.url, true); if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); this.ajaxRequest.send(null) -} +}; -PIXI.SpriteSheetLoader.prototype.onLoaded = function() +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() { - if (this.ajaxRequest.readyState==4) + if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) { var rect = frameData[i].frame; if (rect) @@ -201,32 +214,24 @@ { //var realSize = frameData[i].spriteSourceSize; PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + PIXI.TextureCache[i].trim.x = 0;// (realSize.x / rect.w) // calculate the offset! } - // this.frames[i] = ; } } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; diff --git a/docs/files/src_pixi_renderers_CanvasRenderer.js.html b/docs/files/src_pixi_renderers_CanvasRenderer.js.html index 5598bbd..0b91b46 100644 --- a/docs/files/src_pixi_renderers_CanvasRenderer.js.html +++ b/docs/files/src_pixi_renderers_CanvasRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLBatch.js.html b/docs/files/src_pixi_renderers_WebGLBatch.js.html index 17824ca..95b86b5 100644 --- a/docs/files/src_pixi_renderers_WebGLBatch.js.html +++ b/docs/files/src_pixi_renderers_WebGLBatch.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 0a39149..af0ce9f 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLShaders.js.html b/docs/files/src_pixi_renderers_WebGLShaders.js.html index 40ac3bd..bb52ff9 100644 --- a/docs/files/src_pixi_renderers_WebGLShaders.js.html +++ b/docs/files/src_pixi_renderers_WebGLShaders.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_text_BitmapText.js.html b/docs/files/src_pixi_text_BitmapText.js.html new file mode 100644 index 0000000..9fdae27 --- /dev/null +++ b/docs/files/src_pixi_text_BitmapText.js.html @@ -0,0 +1,306 @@ + + + + + src/pixi/text/BitmapText.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/BitmapText.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text using bitmap font 
+ * You can generate the fnt files using 
+ * http://www.angelcode.com/products/bmfont/ for windows of
+ * http://www.bmglyph.com/ for mac.
+ * @class BitmapText
+ * @extends DisplayObjectContainer
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously)
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+ //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font
+PIXI.BitmapText = function(text, style)
+{
+    PIXI.DisplayObjectContainer.call(this);
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false
+
+};
+
+// constructor
+PIXI.BitmapText.constructor = PIXI.BitmapText;
+PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);
+
+/**
+ * Set the copy for the text object
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.BitmapText.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+PIXI.BitmapText.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.align = style.align || "left";
+    this.style = style;
+
+    var font = style.font.split(" ");
+    this.fontName = font[font.length - 1];
+    this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size;
+
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.BitmapText.prototype.updateText = function()
+{
+    var data = PIXI.BitmapText.fonts[this.fontName];
+    var pos = new PIXI.Point();
+    var prevCharCode = null;
+    var chars = [];
+    var maxLineWidth = 0;
+    var lineWidths = [];
+    var line = 0;
+    var scale = this.fontSize / data.size;
+    for(var i = 0; i < this.text.length; i++)
+    {
+        var charCode = this.text.charCodeAt(i);
+        if(charCode == "\n".charCodeAt(0))
+        {
+            lineWidths.push(pos.x);
+            maxLineWidth = Math.max(maxLineWidth, pos.x);
+            line++;
+
+            pos.x = 0;
+            pos.y += data.lineHeight;
+            prevCharCode = null;
+            continue;
+        }
+        
+        var charData = data.chars[charCode];
+        if(!charData) continue;
+
+        if(prevCharCode && charData[prevCharCode])
+        {
+           pos.x += charData.kerning[prevCharCode];
+        }
+        chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)});
+        pos.x += charData.xAdvance;
+
+        prevCharCode = charCode;
+    }
+
+    lineWidths.push(pos.x);
+    maxLineWidth = Math.max(maxLineWidth, pos.x);
+
+    var lineAlignOffsets = [];
+    for(i = 0; i <= line; i++)
+    {
+        var alignOffset = 0;
+        if(this.style.align == "right")
+        {
+            alignOffset = maxLineWidth - lineWidths[i];
+        }
+        else if(this.style.align == "center")
+        {
+            alignOffset = (maxLineWidth - lineWidths[i]) / 2;
+        }
+        lineAlignOffsets.push(alignOffset);
+    }
+
+    for(i = 0; i < chars.length; i++)
+    {
+        var char = PIXI.Sprite.fromFrame(chars[i].charCode);
+        char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale;
+        char.position.y = chars[i].position.y * scale;
+        char.scale.x = char.scale.y = scale;
+        this.addChild(char);
+    }
+
+    this.width = pos.x * scale;
+    this.height = (pos.y + data.lineHeight) * scale;
+};
+
+/**
+ * @private
+ */
+PIXI.BitmapText.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+        while(this.children.length > 0)
+        {
+            this.removeChild(this.getChildAt(0));
+        }
+        this.updateText();
+
+        this.dirty = false;
+	}
+	
+	PIXI.DisplayObjectContainer.prototype.updateTransform.call(this);
+};
+
+PIXI.BitmapText.fonts = {};
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_text_Text.js.html b/docs/files/src_pixi_text_Text.js.html new file mode 100644 index 0000000..7933074 --- /dev/null +++ b/docs/files/src_pixi_text_Text.js.html @@ -0,0 +1,344 @@ + + + + + src/pixi/text/Text.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/Text.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text to split a line you can use "\n"
+ * @class Text
+ * @extends Sprite
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text = function(text, style)
+{
+    this.canvas = document.createElement("canvas");
+    this.context = this.canvas.getContext("2d");
+    PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas));
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false;
+};
+
+// constructor
+PIXI.Text.constructor = PIXI.Text;
+PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype);
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font="bold 20pt Arial"] The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.font = style.font || "bold 20pt Arial";
+    style.fill = style.fill || "black";
+    style.align = style.align || "left";
+    style.strokeThickness = style.strokeThickness || 0;
+    this.style = style;
+    this.dirty = true;
+};
+
+/**
+ * Set the copy for the text object. To split a line you can use "\n"
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.Sprite.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.Text.prototype.updateText = function()
+{
+	this.context.font = this.style.font;
+
+	//split text into lines
+	var lines = this.text.split("\n");
+
+	//calculate text width
+	var lineWidths = [];
+	var maxLineWidth = 0;
+	for (var i = 0; i < lines.length; i++)
+	{
+		var lineWidth = this.context.measureText(lines[i]).width;
+		lineWidths[i] = lineWidth;
+		maxLineWidth = Math.max(maxLineWidth, lineWidth);
+	}
+	this.canvas.width = maxLineWidth + this.style.strokeThickness;
+	
+	//calculate text height
+	var lineHeight = this.determineFontHeight("font: " + this.style.font  + ";") + this.style.strokeThickness;
+	this.canvas.height = lineHeight * lines.length;
+
+	//set canvas text styles
+	this.context.fillStyle = this.style.fill;
+	this.context.font = this.style.font;
+	
+	this.context.strokeStyle = this.style.stroke;
+	this.context.lineWidth = this.style.strokeThickness;
+
+	this.context.textBaseline = "top";
+
+	//draw lines line by line
+	for (i = 0; i < lines.length; i++)
+	{
+		var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight);
+	
+		if(this.style.align == "right")
+		{
+			linePosition.x += maxLineWidth - lineWidths[i];
+		}
+		else if(this.style.align == "center")
+		{
+			linePosition.x += (maxLineWidth - lineWidths[i]) / 2;
+		}
+
+		if(this.style.stroke && this.style.strokeThickness)
+		{
+			this.context.strokeText(lines[i], linePosition.x, linePosition.y);
+		}
+
+		if(this.style.fill)
+		{
+			this.context.fillText(lines[i], linePosition.x, linePosition.y);
+		}
+	}
+	
+    this.updateTexture();
+};
+
+/**
+ * Updates texture size based on canvas size
+ * @private
+ */
+PIXI.Text.prototype.updateTexture = function()
+{
+
+    this.texture.baseTexture.width = this.canvas.width;
+    this.texture.baseTexture.height = this.canvas.height;
+    this.texture.frame.width = this.canvas.width;
+    this.texture.frame.height = this.canvas.height;
+    PIXI.texturesToUpdate.push(this.texture.baseTexture);
+};
+
+/**
+ * @private
+ */
+PIXI.Text.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+		this.updateText();	
+		this.dirty = false;
+	}
+	
+	PIXI.Sprite.prototype.updateTransform.call(this);
+};
+
+/*
+ * http://stackoverflow.com/users/34441/ellisbben
+ * great solution to the problem!
+ */
+PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
+{
+	// build a little reference dictionary so if the font style has been used return a
+	// cached version...
+	var result = PIXI.Text.heightCache[fontStyle];
+	
+	if(!result)
+	{
+		var body = document.getElementsByTagName("body")[0];
+		var dummy = document.createElement("div");
+		var dummyText = document.createTextNode("M");
+		dummy.appendChild(dummyText);
+		dummy.setAttribute("style", fontStyle);
+		body.appendChild(dummy);
+		
+		result = dummy.offsetHeight;
+		PIXI.Text.heightCache[fontStyle] = result;
+		
+		body.removeChild(dummy);
+	}
+	
+	return result;
+};
+
+PIXI.Text.prototype.destroy = function(destroyTexture)
+{
+	if(destroyTexture)
+	{
+		this.texture.destroy();
+	}
+		
+};
+
+PIXI.Text.heightCache = {};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_textures_BaseTexture.js.html b/docs/files/src_pixi_textures_BaseTexture.js.html index a7d8f96..31917f0 100644 --- a/docs/files/src_pixi_textures_BaseTexture.js.html +++ b/docs/files/src_pixi_textures_BaseTexture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_textures_Texture.js.html b/docs/files/src_pixi_textures_Texture.js.html index 35f12dc..ca52cac 100644 --- a/docs/files/src_pixi_textures_Texture.js.html +++ b/docs/files/src_pixi_textures_Texture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_Detector.js.html b/docs/files/src_pixi_utils_Detector.js.html index 6b7d031..62cc770 100644 --- a/docs/files/src_pixi_utils_Detector.js.html +++ b/docs/files/src_pixi_utils_Detector.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_EventTarget.js.html b/docs/files/src_pixi_utils_EventTarget.js.html index 929e6eb..7a794c3 100644 --- a/docs/files/src_pixi_utils_EventTarget.js.html +++ b/docs/files/src_pixi_utils_EventTarget.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_Utils.js.html b/docs/files/src_pixi_utils_Utils.js.html index c6b3b43..e46f12a 100644 --- a/docs/files/src_pixi_utils_Utils.js.html +++ b/docs/files/src_pixi_utils_Utils.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/index.html b/docs/index.html index 36c00da..f277aae 100644 --- a/docs/index.html +++ b/docs/index.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/modules/PIXI.html b/docs/modules/PIXI.html index 3cf7051..d3a42e3 100644 --- a/docs/modules/PIXI.html +++ b/docs/modules/PIXI.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -126,7 +132,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/Stage.js:5
    @@ -161,6 +167,18 @@
  • + + BitmapFontLoader + +
    • + +
  • + + BitmapText + +
    • + +
  • CanvasRenderer @@ -179,6 +197,12 @@
  • + + ImageLoader + +
    • + +
  • InteractionData diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Text.js.html b/docs/files/src_pixi_Text.js.html deleted file mode 100644 index 33b7cf2..0000000 --- a/docs/files/src_pixi_Text.js.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - src/pixi/Text.js - Pixi.JS - - - - - - - - -
    -
    -
    - -

    - -
    -
    - API Docs for: 1.0.0 -
    -
    -
    - -
    - -
    -
    -
    - Show: - - - - - - - -
    - - -
    -
    -
    -

    File: src/pixi/Text.js

    - -
    - 
    -/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * A Text Object will create a line of text
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.canvas = document.createElement("canvas");
-	
-	this.context = this.canvas.getContext("2d");
-	//document.body.appendChild(this.canvas);
-	this.setText(text);
-	this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
-	
-	this.updateText();
-	
-	PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
-	
-	// need to store a canvas that can
-}
-
-// constructor
-PIXI.Text.constructor = PIXI.Text;
-PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
-
-/**
- * Set the copy for the text object
- * @methos setText
- * @param text {String} The copy that you would like the text to display
- */
-PIXI.Text.prototype.setText = function(text)
-{
-	this.text = text || " ";
-	this.dirty = true;
-}
-
-/**
- * Set the style of the text
- * @method setStyle
- * @constructor
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.fontStyle = fontStyle || "bold 20pt Arial";
-	this.fillStyle = fillStyle;
-	this.strokeStyle = strokeStyle;
-	this.strokeThickness = strokeThickness || 0;
-	
-	this.dirty = true;
-}
-
-/**
- * @private
- */
-PIXI.Text.prototype.updateText = function()
-{
-//	console.log(this.text);
-	this.context.font = this.fontStyle;
-		
-	this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
-	this.canvas.height = this.determineFontHeight("font: " + this.fontStyle  + ";")+ this.strokeThickness;// textDimensions.height;
-
-	this.context.fillStyle = this.fillStyle;
-	this.context.font = this.fontStyle;
-	
-    this.context.strokeStyle = this.strokeStyle;
-	this.context.lineWidth = this.strokeThickness;
-
-	this.context.textBaseline="top"; 
-
-    if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	
-	
-//	console.log("//")
-}
-
-PIXI.Text.prototype.updateTransform = function()
-{
-	if(this.dirty)
-	{
-		this.updateText();	
-		
-		// update the texture..
-		this.texture.baseTexture.width = this.canvas.width;
-		this.texture.baseTexture.height = this.canvas.height;
-		this.texture.frame.width = this.canvas.width;
-		this.texture.frame.height = this.canvas.height;
-		
-		PIXI.texturesToUpdate.push(this.texture.baseTexture);
-		this.dirty = false;
-	}
-	
-	PIXI.Sprite.prototype.updateTransform.call( this );
-}
-
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
-{
-	// build a little refference dictionary so if the font style has been used return a
-	// cached version...
-	var result = PIXI.Text.heightCache[fontStyle]
-	
-	if(!result)
-	{
-		var body = document.getElementsByTagName("body")[0];
-		var dummy = document.createElement("div");
-		var dummyText = document.createTextNode("M");
-		dummy.appendChild(dummyText);
-		dummy.setAttribute("style", fontStyle);
-		body.appendChild(dummy);
-		
-		result = dummy.offsetHeight;
-		PIXI.Text.heightCache[fontStyle] = result
-		
-		body.removeChild(dummy);
-	}
-	
-	return result;
-};
-
-PIXI.Text.prototype.destroy = function(destroyTexture)
-{
-	if(destroyTexture)
-	{
-		this.texture.destroy();
-	}
-		
-}
-
-PIXI.Text.heightCache = {};
-
-
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - diff --git a/docs/files/src_pixi_extras_Rope.js.html b/docs/files/src_pixi_extras_Rope.js.html index 7e2ceff..219f049 100644 --- a/docs/files/src_pixi_extras_Rope.js.html +++ b/docs/files/src_pixi_extras_Rope.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_Strip.js.html b/docs/files/src_pixi_extras_Strip.js.html index 8f748c2..a7a64cd 100644 --- a/docs/files/src_pixi_extras_Strip.js.html +++ b/docs/files/src_pixi_extras_Strip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_TilingSprite.js.html b/docs/files/src_pixi_extras_TilingSprite.js.html index af3d84d..b61c15f 100644 --- a/docs/files/src_pixi_extras_TilingSprite.js.html +++ b/docs/files/src_pixi_extras_TilingSprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_loaders_AssetLoader.js.html b/docs/files/src_pixi_loaders_AssetLoader.js.html index 089d5cf..594481e 100644 --- a/docs/files/src_pixi_loaders_AssetLoader.js.html +++ b/docs/files/src_pixi_loaders_AssetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -127,17 +133,17 @@ */ /** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -145,11 +151,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -169,105 +183,45 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; diff --git a/docs/files/src_pixi_loaders_BitmapFontLoader.js.html b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html new file mode 100644 index 0000000..6fd5d80 --- /dev/null +++ b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html @@ -0,0 +1,275 @@ + + + + + src/pixi/loaders/BitmapFontLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/BitmapFontLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The xml loader is used to load in XML bitmap font data ("xml" or "fnt")
+ * To generate the data you can use http://www.angelcode.com/products/bmfont/
+ * This loader will also load the image file as the data.
+ * When loaded this class will dispatch a "loaded" event
+ * @class BitmapFontLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url the url of the sprite sheet JSON file
+ * @param {Boolean} crossorigin
+ */
+
+PIXI.BitmapFontLoader = function(url, crossorigin)
+{
+    /*
+     * i use texture packer to load the assets..
+     * http://www.codeandweb.com/texturepacker
+     * make sure to set the format as "JSON"
+     */
+    PIXI.EventTarget.call(this);
+    this.url = url;
+    this.baseUrl = url.replace(/[^\/]*$/, "");
+    this.texture = null;
+    this.crossorigin = crossorigin;
+};
+
+// constructor
+PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader;
+
+/**
+ * This will begin loading the JSON file
+ */
+PIXI.BitmapFontLoader.prototype.load = function()
+{
+    this.ajaxRequest = new XMLHttpRequest();
+    var scope = this;
+    this.ajaxRequest.onreadystatechange = function()
+    {
+        scope.onXMLLoaded();
+    };
+
+    this.ajaxRequest.open("GET", this.url, true);
+    if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml");
+    this.ajaxRequest.send(null)
+};
+
+/**
+ * Invoked when XML file is loaded
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
+{
+    if (this.ajaxRequest.readyState == 4)
+    {
+        if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1)
+        {
+            var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue;
+            var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
+            this.texture = image.texture.baseTexture;
+
+            var data = {};
+            var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0];
+            var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0];
+            data.font = info.attributes.getNamedItem("face").nodeValue;
+            data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10);
+            data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10);
+            data.chars = {};
+
+            //parse letters
+            var letters = this.ajaxRequest.responseXML.getElementsByTagName("char");
+
+            for (var i = 0; i < letters.length; i++)
+            {
+                var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10);
+
+                var textureRect = {
+                    x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10),
+                    y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10),
+                    width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10),
+                    height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10)
+                };
+                PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect);
+
+                data.chars[charCode] = {
+                    xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10),
+                    yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10),
+                    xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10),
+                    kerning: {}
+                };
+            }
+
+            //parse kernings
+            var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning");
+            for (i = 0; i < kernings.length; i++)
+            {
+               var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10);
+               var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10);
+               var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10);
+
+                data.chars[second].kerning[first] = amount;
+
+            }
+            PIXI.BitmapText.fonts[data.font] = data;
+
+            var scope = this;
+            image.addEventListener("loaded", function() {
+                scope.onLoaded();
+            });
+            image.load();
+        }
+    }
+};
+
+/**
+ * Invoked when all files are loaded (xml/fnt and texture)
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_ImageLoader.js.html b/docs/files/src_pixi_loaders_ImageLoader.js.html new file mode 100644 index 0000000..f6fcf07 --- /dev/null +++ b/docs/files/src_pixi_loaders_ImageLoader.js.html @@ -0,0 +1,200 @@ + + + + + src/pixi/loaders/ImageLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/ImageLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif")
+ * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
+ * When loaded this class will dispatch a 'loaded' event
+ * @class ImageLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url The url of the image
+ * @param {Boolean} crossorigin
+ */
+PIXI.ImageLoader = function(url, crossorigin)
+{
+    PIXI.EventTarget.call(this);
+    this.texture = PIXI.Texture.fromImage(url, crossorigin);
+};
+
+// constructor
+PIXI.ImageLoader.constructor = PIXI.ImageLoader;
+
+/**
+ * Loads image or takes it from cache
+ */
+PIXI.ImageLoader.prototype.load = function()
+{
+    if(!this.texture.baseTexture.hasLoaded)
+    {
+        var scope = this;
+        this.texture.baseTexture.addEventListener("loaded", function()
+        {
+            scope.onLoaded();
+        });
+    }
+    else
+    {
+        this.onLoaded();
+    }
+};
+
+/**
+ * Invoked when image file is loaded or it is already cached and ready to use
+ * @private
+ */
+PIXI.ImageLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 5510866..3b14d2f 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,30 +136,31 @@ * The sprite sheet loader is used to load in JSON sprite sheet data * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event + * When loaded this class will dispatch a "loaded" event * @class SpriteSheetLoader * @extends EventTarget * @constructor - * @param url {String} the url of the sprite sheet JSON file + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin */ -PIXI.SpriteSheetLoader = function(url) +PIXI.SpriteSheetLoader = function(url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker * make sure to set the format as "JSON" */ - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; this.frames = {}; - this.crossorigin = false; -} + this.crossorigin = crossorigin; +}; // constructor PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; @@ -165,32 +172,38 @@ { this.ajaxRequest = new AjaxRequest(); var scope = this; - this.ajaxRequest.onreadystatechange=function() + this.ajaxRequest.onreadystatechange = function() { - scope.onLoaded(); - } + scope.onJSONLoaded(); + }; - this.ajaxRequest.open("GET", this.url, true) + this.ajaxRequest.open("GET", this.url, true); if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); this.ajaxRequest.send(null) -} +}; -PIXI.SpriteSheetLoader.prototype.onLoaded = function() +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() { - if (this.ajaxRequest.readyState==4) + if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) { var rect = frameData[i].frame; if (rect) @@ -201,32 +214,24 @@ { //var realSize = frameData[i].spriteSourceSize; PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + PIXI.TextureCache[i].trim.x = 0;// (realSize.x / rect.w) // calculate the offset! } - // this.frames[i] = ; } } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; diff --git a/docs/files/src_pixi_renderers_CanvasRenderer.js.html b/docs/files/src_pixi_renderers_CanvasRenderer.js.html index 5598bbd..0b91b46 100644 --- a/docs/files/src_pixi_renderers_CanvasRenderer.js.html +++ b/docs/files/src_pixi_renderers_CanvasRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLBatch.js.html b/docs/files/src_pixi_renderers_WebGLBatch.js.html index 17824ca..95b86b5 100644 --- a/docs/files/src_pixi_renderers_WebGLBatch.js.html +++ b/docs/files/src_pixi_renderers_WebGLBatch.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 0a39149..af0ce9f 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLShaders.js.html b/docs/files/src_pixi_renderers_WebGLShaders.js.html index 40ac3bd..bb52ff9 100644 --- a/docs/files/src_pixi_renderers_WebGLShaders.js.html +++ b/docs/files/src_pixi_renderers_WebGLShaders.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_text_BitmapText.js.html b/docs/files/src_pixi_text_BitmapText.js.html new file mode 100644 index 0000000..9fdae27 --- /dev/null +++ b/docs/files/src_pixi_text_BitmapText.js.html @@ -0,0 +1,306 @@ + + + + + src/pixi/text/BitmapText.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/BitmapText.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text using bitmap font 
+ * You can generate the fnt files using 
+ * http://www.angelcode.com/products/bmfont/ for windows of
+ * http://www.bmglyph.com/ for mac.
+ * @class BitmapText
+ * @extends DisplayObjectContainer
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously)
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+ //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font
+PIXI.BitmapText = function(text, style)
+{
+    PIXI.DisplayObjectContainer.call(this);
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false
+
+};
+
+// constructor
+PIXI.BitmapText.constructor = PIXI.BitmapText;
+PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);
+
+/**
+ * Set the copy for the text object
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.BitmapText.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+PIXI.BitmapText.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.align = style.align || "left";
+    this.style = style;
+
+    var font = style.font.split(" ");
+    this.fontName = font[font.length - 1];
+    this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size;
+
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.BitmapText.prototype.updateText = function()
+{
+    var data = PIXI.BitmapText.fonts[this.fontName];
+    var pos = new PIXI.Point();
+    var prevCharCode = null;
+    var chars = [];
+    var maxLineWidth = 0;
+    var lineWidths = [];
+    var line = 0;
+    var scale = this.fontSize / data.size;
+    for(var i = 0; i < this.text.length; i++)
+    {
+        var charCode = this.text.charCodeAt(i);
+        if(charCode == "\n".charCodeAt(0))
+        {
+            lineWidths.push(pos.x);
+            maxLineWidth = Math.max(maxLineWidth, pos.x);
+            line++;
+
+            pos.x = 0;
+            pos.y += data.lineHeight;
+            prevCharCode = null;
+            continue;
+        }
+        
+        var charData = data.chars[charCode];
+        if(!charData) continue;
+
+        if(prevCharCode && charData[prevCharCode])
+        {
+           pos.x += charData.kerning[prevCharCode];
+        }
+        chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)});
+        pos.x += charData.xAdvance;
+
+        prevCharCode = charCode;
+    }
+
+    lineWidths.push(pos.x);
+    maxLineWidth = Math.max(maxLineWidth, pos.x);
+
+    var lineAlignOffsets = [];
+    for(i = 0; i <= line; i++)
+    {
+        var alignOffset = 0;
+        if(this.style.align == "right")
+        {
+            alignOffset = maxLineWidth - lineWidths[i];
+        }
+        else if(this.style.align == "center")
+        {
+            alignOffset = (maxLineWidth - lineWidths[i]) / 2;
+        }
+        lineAlignOffsets.push(alignOffset);
+    }
+
+    for(i = 0; i < chars.length; i++)
+    {
+        var char = PIXI.Sprite.fromFrame(chars[i].charCode);
+        char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale;
+        char.position.y = chars[i].position.y * scale;
+        char.scale.x = char.scale.y = scale;
+        this.addChild(char);
+    }
+
+    this.width = pos.x * scale;
+    this.height = (pos.y + data.lineHeight) * scale;
+};
+
+/**
+ * @private
+ */
+PIXI.BitmapText.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+        while(this.children.length > 0)
+        {
+            this.removeChild(this.getChildAt(0));
+        }
+        this.updateText();
+
+        this.dirty = false;
+	}
+	
+	PIXI.DisplayObjectContainer.prototype.updateTransform.call(this);
+};
+
+PIXI.BitmapText.fonts = {};
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_text_Text.js.html b/docs/files/src_pixi_text_Text.js.html new file mode 100644 index 0000000..7933074 --- /dev/null +++ b/docs/files/src_pixi_text_Text.js.html @@ -0,0 +1,344 @@ + + + + + src/pixi/text/Text.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/Text.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text to split a line you can use "\n"
+ * @class Text
+ * @extends Sprite
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text = function(text, style)
+{
+    this.canvas = document.createElement("canvas");
+    this.context = this.canvas.getContext("2d");
+    PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas));
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false;
+};
+
+// constructor
+PIXI.Text.constructor = PIXI.Text;
+PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype);
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font="bold 20pt Arial"] The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.font = style.font || "bold 20pt Arial";
+    style.fill = style.fill || "black";
+    style.align = style.align || "left";
+    style.strokeThickness = style.strokeThickness || 0;
+    this.style = style;
+    this.dirty = true;
+};
+
+/**
+ * Set the copy for the text object. To split a line you can use "\n"
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.Sprite.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.Text.prototype.updateText = function()
+{
+	this.context.font = this.style.font;
+
+	//split text into lines
+	var lines = this.text.split("\n");
+
+	//calculate text width
+	var lineWidths = [];
+	var maxLineWidth = 0;
+	for (var i = 0; i < lines.length; i++)
+	{
+		var lineWidth = this.context.measureText(lines[i]).width;
+		lineWidths[i] = lineWidth;
+		maxLineWidth = Math.max(maxLineWidth, lineWidth);
+	}
+	this.canvas.width = maxLineWidth + this.style.strokeThickness;
+	
+	//calculate text height
+	var lineHeight = this.determineFontHeight("font: " + this.style.font  + ";") + this.style.strokeThickness;
+	this.canvas.height = lineHeight * lines.length;
+
+	//set canvas text styles
+	this.context.fillStyle = this.style.fill;
+	this.context.font = this.style.font;
+	
+	this.context.strokeStyle = this.style.stroke;
+	this.context.lineWidth = this.style.strokeThickness;
+
+	this.context.textBaseline = "top";
+
+	//draw lines line by line
+	for (i = 0; i < lines.length; i++)
+	{
+		var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight);
+	
+		if(this.style.align == "right")
+		{
+			linePosition.x += maxLineWidth - lineWidths[i];
+		}
+		else if(this.style.align == "center")
+		{
+			linePosition.x += (maxLineWidth - lineWidths[i]) / 2;
+		}
+
+		if(this.style.stroke && this.style.strokeThickness)
+		{
+			this.context.strokeText(lines[i], linePosition.x, linePosition.y);
+		}
+
+		if(this.style.fill)
+		{
+			this.context.fillText(lines[i], linePosition.x, linePosition.y);
+		}
+	}
+	
+    this.updateTexture();
+};
+
+/**
+ * Updates texture size based on canvas size
+ * @private
+ */
+PIXI.Text.prototype.updateTexture = function()
+{
+
+    this.texture.baseTexture.width = this.canvas.width;
+    this.texture.baseTexture.height = this.canvas.height;
+    this.texture.frame.width = this.canvas.width;
+    this.texture.frame.height = this.canvas.height;
+    PIXI.texturesToUpdate.push(this.texture.baseTexture);
+};
+
+/**
+ * @private
+ */
+PIXI.Text.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+		this.updateText();	
+		this.dirty = false;
+	}
+	
+	PIXI.Sprite.prototype.updateTransform.call(this);
+};
+
+/*
+ * http://stackoverflow.com/users/34441/ellisbben
+ * great solution to the problem!
+ */
+PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
+{
+	// build a little reference dictionary so if the font style has been used return a
+	// cached version...
+	var result = PIXI.Text.heightCache[fontStyle];
+	
+	if(!result)
+	{
+		var body = document.getElementsByTagName("body")[0];
+		var dummy = document.createElement("div");
+		var dummyText = document.createTextNode("M");
+		dummy.appendChild(dummyText);
+		dummy.setAttribute("style", fontStyle);
+		body.appendChild(dummy);
+		
+		result = dummy.offsetHeight;
+		PIXI.Text.heightCache[fontStyle] = result;
+		
+		body.removeChild(dummy);
+	}
+	
+	return result;
+};
+
+PIXI.Text.prototype.destroy = function(destroyTexture)
+{
+	if(destroyTexture)
+	{
+		this.texture.destroy();
+	}
+		
+};
+
+PIXI.Text.heightCache = {};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_textures_BaseTexture.js.html b/docs/files/src_pixi_textures_BaseTexture.js.html index a7d8f96..31917f0 100644 --- a/docs/files/src_pixi_textures_BaseTexture.js.html +++ b/docs/files/src_pixi_textures_BaseTexture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_textures_Texture.js.html b/docs/files/src_pixi_textures_Texture.js.html index 35f12dc..ca52cac 100644 --- a/docs/files/src_pixi_textures_Texture.js.html +++ b/docs/files/src_pixi_textures_Texture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_Detector.js.html b/docs/files/src_pixi_utils_Detector.js.html index 6b7d031..62cc770 100644 --- a/docs/files/src_pixi_utils_Detector.js.html +++ b/docs/files/src_pixi_utils_Detector.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_EventTarget.js.html b/docs/files/src_pixi_utils_EventTarget.js.html index 929e6eb..7a794c3 100644 --- a/docs/files/src_pixi_utils_EventTarget.js.html +++ b/docs/files/src_pixi_utils_EventTarget.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_Utils.js.html b/docs/files/src_pixi_utils_Utils.js.html index c6b3b43..e46f12a 100644 --- a/docs/files/src_pixi_utils_Utils.js.html +++ b/docs/files/src_pixi_utils_Utils.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/index.html b/docs/index.html index 36c00da..f277aae 100644 --- a/docs/index.html +++ b/docs/index.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/modules/PIXI.html b/docs/modules/PIXI.html index 3cf7051..d3a42e3 100644 --- a/docs/modules/PIXI.html +++ b/docs/modules/PIXI.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -126,7 +132,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/Stage.js:5
    @@ -161,6 +167,18 @@
  • + + BitmapFontLoader + +
    • + +
  • + + BitmapText + +
    • + +
  • CanvasRenderer @@ -179,6 +197,12 @@
  • + + ImageLoader + +
    • + +
  • InteractionData diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 10 - Text/pixi.js b/examples/example 10 - Text/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 10 - Text/pixi.js +++ b/examples/example 10 - Text/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Text.js.html b/docs/files/src_pixi_Text.js.html deleted file mode 100644 index 33b7cf2..0000000 --- a/docs/files/src_pixi_Text.js.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - src/pixi/Text.js - Pixi.JS - - - - - - - - -
    -
    -
    - -

    - -
    -
    - API Docs for: 1.0.0 -
    -
    -
    - -
    - -
    -
    -
    - Show: - - - - - - - -
    - - -
    -
    -
    -

    File: src/pixi/Text.js

    - -
    - 
    -/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * A Text Object will create a line of text
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.canvas = document.createElement("canvas");
-	
-	this.context = this.canvas.getContext("2d");
-	//document.body.appendChild(this.canvas);
-	this.setText(text);
-	this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
-	
-	this.updateText();
-	
-	PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
-	
-	// need to store a canvas that can
-}
-
-// constructor
-PIXI.Text.constructor = PIXI.Text;
-PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
-
-/**
- * Set the copy for the text object
- * @methos setText
- * @param text {String} The copy that you would like the text to display
- */
-PIXI.Text.prototype.setText = function(text)
-{
-	this.text = text || " ";
-	this.dirty = true;
-}
-
-/**
- * Set the style of the text
- * @method setStyle
- * @constructor
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.fontStyle = fontStyle || "bold 20pt Arial";
-	this.fillStyle = fillStyle;
-	this.strokeStyle = strokeStyle;
-	this.strokeThickness = strokeThickness || 0;
-	
-	this.dirty = true;
-}
-
-/**
- * @private
- */
-PIXI.Text.prototype.updateText = function()
-{
-//	console.log(this.text);
-	this.context.font = this.fontStyle;
-		
-	this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
-	this.canvas.height = this.determineFontHeight("font: " + this.fontStyle  + ";")+ this.strokeThickness;// textDimensions.height;
-
-	this.context.fillStyle = this.fillStyle;
-	this.context.font = this.fontStyle;
-	
-    this.context.strokeStyle = this.strokeStyle;
-	this.context.lineWidth = this.strokeThickness;
-
-	this.context.textBaseline="top"; 
-
-    if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	
-	
-//	console.log("//")
-}
-
-PIXI.Text.prototype.updateTransform = function()
-{
-	if(this.dirty)
-	{
-		this.updateText();	
-		
-		// update the texture..
-		this.texture.baseTexture.width = this.canvas.width;
-		this.texture.baseTexture.height = this.canvas.height;
-		this.texture.frame.width = this.canvas.width;
-		this.texture.frame.height = this.canvas.height;
-		
-		PIXI.texturesToUpdate.push(this.texture.baseTexture);
-		this.dirty = false;
-	}
-	
-	PIXI.Sprite.prototype.updateTransform.call( this );
-}
-
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
-{
-	// build a little refference dictionary so if the font style has been used return a
-	// cached version...
-	var result = PIXI.Text.heightCache[fontStyle]
-	
-	if(!result)
-	{
-		var body = document.getElementsByTagName("body")[0];
-		var dummy = document.createElement("div");
-		var dummyText = document.createTextNode("M");
-		dummy.appendChild(dummyText);
-		dummy.setAttribute("style", fontStyle);
-		body.appendChild(dummy);
-		
-		result = dummy.offsetHeight;
-		PIXI.Text.heightCache[fontStyle] = result
-		
-		body.removeChild(dummy);
-	}
-	
-	return result;
-};
-
-PIXI.Text.prototype.destroy = function(destroyTexture)
-{
-	if(destroyTexture)
-	{
-		this.texture.destroy();
-	}
-		
-}
-
-PIXI.Text.heightCache = {};
-
-
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - diff --git a/docs/files/src_pixi_extras_Rope.js.html b/docs/files/src_pixi_extras_Rope.js.html index 7e2ceff..219f049 100644 --- a/docs/files/src_pixi_extras_Rope.js.html +++ b/docs/files/src_pixi_extras_Rope.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_Strip.js.html b/docs/files/src_pixi_extras_Strip.js.html index 8f748c2..a7a64cd 100644 --- a/docs/files/src_pixi_extras_Strip.js.html +++ b/docs/files/src_pixi_extras_Strip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_TilingSprite.js.html b/docs/files/src_pixi_extras_TilingSprite.js.html index af3d84d..b61c15f 100644 --- a/docs/files/src_pixi_extras_TilingSprite.js.html +++ b/docs/files/src_pixi_extras_TilingSprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_loaders_AssetLoader.js.html b/docs/files/src_pixi_loaders_AssetLoader.js.html index 089d5cf..594481e 100644 --- a/docs/files/src_pixi_loaders_AssetLoader.js.html +++ b/docs/files/src_pixi_loaders_AssetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -127,17 +133,17 @@ */ /** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -145,11 +151,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -169,105 +183,45 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; diff --git a/docs/files/src_pixi_loaders_BitmapFontLoader.js.html b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html new file mode 100644 index 0000000..6fd5d80 --- /dev/null +++ b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html @@ -0,0 +1,275 @@ + + + + + src/pixi/loaders/BitmapFontLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/BitmapFontLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The xml loader is used to load in XML bitmap font data ("xml" or "fnt")
+ * To generate the data you can use http://www.angelcode.com/products/bmfont/
+ * This loader will also load the image file as the data.
+ * When loaded this class will dispatch a "loaded" event
+ * @class BitmapFontLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url the url of the sprite sheet JSON file
+ * @param {Boolean} crossorigin
+ */
+
+PIXI.BitmapFontLoader = function(url, crossorigin)
+{
+    /*
+     * i use texture packer to load the assets..
+     * http://www.codeandweb.com/texturepacker
+     * make sure to set the format as "JSON"
+     */
+    PIXI.EventTarget.call(this);
+    this.url = url;
+    this.baseUrl = url.replace(/[^\/]*$/, "");
+    this.texture = null;
+    this.crossorigin = crossorigin;
+};
+
+// constructor
+PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader;
+
+/**
+ * This will begin loading the JSON file
+ */
+PIXI.BitmapFontLoader.prototype.load = function()
+{
+    this.ajaxRequest = new XMLHttpRequest();
+    var scope = this;
+    this.ajaxRequest.onreadystatechange = function()
+    {
+        scope.onXMLLoaded();
+    };
+
+    this.ajaxRequest.open("GET", this.url, true);
+    if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml");
+    this.ajaxRequest.send(null)
+};
+
+/**
+ * Invoked when XML file is loaded
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
+{
+    if (this.ajaxRequest.readyState == 4)
+    {
+        if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1)
+        {
+            var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue;
+            var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
+            this.texture = image.texture.baseTexture;
+
+            var data = {};
+            var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0];
+            var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0];
+            data.font = info.attributes.getNamedItem("face").nodeValue;
+            data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10);
+            data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10);
+            data.chars = {};
+
+            //parse letters
+            var letters = this.ajaxRequest.responseXML.getElementsByTagName("char");
+
+            for (var i = 0; i < letters.length; i++)
+            {
+                var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10);
+
+                var textureRect = {
+                    x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10),
+                    y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10),
+                    width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10),
+                    height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10)
+                };
+                PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect);
+
+                data.chars[charCode] = {
+                    xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10),
+                    yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10),
+                    xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10),
+                    kerning: {}
+                };
+            }
+
+            //parse kernings
+            var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning");
+            for (i = 0; i < kernings.length; i++)
+            {
+               var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10);
+               var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10);
+               var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10);
+
+                data.chars[second].kerning[first] = amount;
+
+            }
+            PIXI.BitmapText.fonts[data.font] = data;
+
+            var scope = this;
+            image.addEventListener("loaded", function() {
+                scope.onLoaded();
+            });
+            image.load();
+        }
+    }
+};
+
+/**
+ * Invoked when all files are loaded (xml/fnt and texture)
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_ImageLoader.js.html b/docs/files/src_pixi_loaders_ImageLoader.js.html new file mode 100644 index 0000000..f6fcf07 --- /dev/null +++ b/docs/files/src_pixi_loaders_ImageLoader.js.html @@ -0,0 +1,200 @@ + + + + + src/pixi/loaders/ImageLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/ImageLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif")
+ * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
+ * When loaded this class will dispatch a 'loaded' event
+ * @class ImageLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url The url of the image
+ * @param {Boolean} crossorigin
+ */
+PIXI.ImageLoader = function(url, crossorigin)
+{
+    PIXI.EventTarget.call(this);
+    this.texture = PIXI.Texture.fromImage(url, crossorigin);
+};
+
+// constructor
+PIXI.ImageLoader.constructor = PIXI.ImageLoader;
+
+/**
+ * Loads image or takes it from cache
+ */
+PIXI.ImageLoader.prototype.load = function()
+{
+    if(!this.texture.baseTexture.hasLoaded)
+    {
+        var scope = this;
+        this.texture.baseTexture.addEventListener("loaded", function()
+        {
+            scope.onLoaded();
+        });
+    }
+    else
+    {
+        this.onLoaded();
+    }
+};
+
+/**
+ * Invoked when image file is loaded or it is already cached and ready to use
+ * @private
+ */
+PIXI.ImageLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 5510866..3b14d2f 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,30 +136,31 @@ * The sprite sheet loader is used to load in JSON sprite sheet data * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event + * When loaded this class will dispatch a "loaded" event * @class SpriteSheetLoader * @extends EventTarget * @constructor - * @param url {String} the url of the sprite sheet JSON file + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin */ -PIXI.SpriteSheetLoader = function(url) +PIXI.SpriteSheetLoader = function(url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker * make sure to set the format as "JSON" */ - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; this.frames = {}; - this.crossorigin = false; -} + this.crossorigin = crossorigin; +}; // constructor PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; @@ -165,32 +172,38 @@ { this.ajaxRequest = new AjaxRequest(); var scope = this; - this.ajaxRequest.onreadystatechange=function() + this.ajaxRequest.onreadystatechange = function() { - scope.onLoaded(); - } + scope.onJSONLoaded(); + }; - this.ajaxRequest.open("GET", this.url, true) + this.ajaxRequest.open("GET", this.url, true); if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); this.ajaxRequest.send(null) -} +}; -PIXI.SpriteSheetLoader.prototype.onLoaded = function() +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() { - if (this.ajaxRequest.readyState==4) + if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) { var rect = frameData[i].frame; if (rect) @@ -201,32 +214,24 @@ { //var realSize = frameData[i].spriteSourceSize; PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + PIXI.TextureCache[i].trim.x = 0;// (realSize.x / rect.w) // calculate the offset! } - // this.frames[i] = ; } } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; diff --git a/docs/files/src_pixi_renderers_CanvasRenderer.js.html b/docs/files/src_pixi_renderers_CanvasRenderer.js.html index 5598bbd..0b91b46 100644 --- a/docs/files/src_pixi_renderers_CanvasRenderer.js.html +++ b/docs/files/src_pixi_renderers_CanvasRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLBatch.js.html b/docs/files/src_pixi_renderers_WebGLBatch.js.html index 17824ca..95b86b5 100644 --- a/docs/files/src_pixi_renderers_WebGLBatch.js.html +++ b/docs/files/src_pixi_renderers_WebGLBatch.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 0a39149..af0ce9f 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLShaders.js.html b/docs/files/src_pixi_renderers_WebGLShaders.js.html index 40ac3bd..bb52ff9 100644 --- a/docs/files/src_pixi_renderers_WebGLShaders.js.html +++ b/docs/files/src_pixi_renderers_WebGLShaders.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_text_BitmapText.js.html b/docs/files/src_pixi_text_BitmapText.js.html new file mode 100644 index 0000000..9fdae27 --- /dev/null +++ b/docs/files/src_pixi_text_BitmapText.js.html @@ -0,0 +1,306 @@ + + + + + src/pixi/text/BitmapText.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/BitmapText.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text using bitmap font 
+ * You can generate the fnt files using 
+ * http://www.angelcode.com/products/bmfont/ for windows of
+ * http://www.bmglyph.com/ for mac.
+ * @class BitmapText
+ * @extends DisplayObjectContainer
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously)
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+ //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font
+PIXI.BitmapText = function(text, style)
+{
+    PIXI.DisplayObjectContainer.call(this);
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false
+
+};
+
+// constructor
+PIXI.BitmapText.constructor = PIXI.BitmapText;
+PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);
+
+/**
+ * Set the copy for the text object
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.BitmapText.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+PIXI.BitmapText.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.align = style.align || "left";
+    this.style = style;
+
+    var font = style.font.split(" ");
+    this.fontName = font[font.length - 1];
+    this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size;
+
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.BitmapText.prototype.updateText = function()
+{
+    var data = PIXI.BitmapText.fonts[this.fontName];
+    var pos = new PIXI.Point();
+    var prevCharCode = null;
+    var chars = [];
+    var maxLineWidth = 0;
+    var lineWidths = [];
+    var line = 0;
+    var scale = this.fontSize / data.size;
+    for(var i = 0; i < this.text.length; i++)
+    {
+        var charCode = this.text.charCodeAt(i);
+        if(charCode == "\n".charCodeAt(0))
+        {
+            lineWidths.push(pos.x);
+            maxLineWidth = Math.max(maxLineWidth, pos.x);
+            line++;
+
+            pos.x = 0;
+            pos.y += data.lineHeight;
+            prevCharCode = null;
+            continue;
+        }
+        
+        var charData = data.chars[charCode];
+        if(!charData) continue;
+
+        if(prevCharCode && charData[prevCharCode])
+        {
+           pos.x += charData.kerning[prevCharCode];
+        }
+        chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)});
+        pos.x += charData.xAdvance;
+
+        prevCharCode = charCode;
+    }
+
+    lineWidths.push(pos.x);
+    maxLineWidth = Math.max(maxLineWidth, pos.x);
+
+    var lineAlignOffsets = [];
+    for(i = 0; i <= line; i++)
+    {
+        var alignOffset = 0;
+        if(this.style.align == "right")
+        {
+            alignOffset = maxLineWidth - lineWidths[i];
+        }
+        else if(this.style.align == "center")
+        {
+            alignOffset = (maxLineWidth - lineWidths[i]) / 2;
+        }
+        lineAlignOffsets.push(alignOffset);
+    }
+
+    for(i = 0; i < chars.length; i++)
+    {
+        var char = PIXI.Sprite.fromFrame(chars[i].charCode);
+        char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale;
+        char.position.y = chars[i].position.y * scale;
+        char.scale.x = char.scale.y = scale;
+        this.addChild(char);
+    }
+
+    this.width = pos.x * scale;
+    this.height = (pos.y + data.lineHeight) * scale;
+};
+
+/**
+ * @private
+ */
+PIXI.BitmapText.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+        while(this.children.length > 0)
+        {
+            this.removeChild(this.getChildAt(0));
+        }
+        this.updateText();
+
+        this.dirty = false;
+	}
+	
+	PIXI.DisplayObjectContainer.prototype.updateTransform.call(this);
+};
+
+PIXI.BitmapText.fonts = {};
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_text_Text.js.html b/docs/files/src_pixi_text_Text.js.html new file mode 100644 index 0000000..7933074 --- /dev/null +++ b/docs/files/src_pixi_text_Text.js.html @@ -0,0 +1,344 @@ + + + + + src/pixi/text/Text.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/Text.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text to split a line you can use "\n"
+ * @class Text
+ * @extends Sprite
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text = function(text, style)
+{
+    this.canvas = document.createElement("canvas");
+    this.context = this.canvas.getContext("2d");
+    PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas));
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false;
+};
+
+// constructor
+PIXI.Text.constructor = PIXI.Text;
+PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype);
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font="bold 20pt Arial"] The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.font = style.font || "bold 20pt Arial";
+    style.fill = style.fill || "black";
+    style.align = style.align || "left";
+    style.strokeThickness = style.strokeThickness || 0;
+    this.style = style;
+    this.dirty = true;
+};
+
+/**
+ * Set the copy for the text object. To split a line you can use "\n"
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.Sprite.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.Text.prototype.updateText = function()
+{
+	this.context.font = this.style.font;
+
+	//split text into lines
+	var lines = this.text.split("\n");
+
+	//calculate text width
+	var lineWidths = [];
+	var maxLineWidth = 0;
+	for (var i = 0; i < lines.length; i++)
+	{
+		var lineWidth = this.context.measureText(lines[i]).width;
+		lineWidths[i] = lineWidth;
+		maxLineWidth = Math.max(maxLineWidth, lineWidth);
+	}
+	this.canvas.width = maxLineWidth + this.style.strokeThickness;
+	
+	//calculate text height
+	var lineHeight = this.determineFontHeight("font: " + this.style.font  + ";") + this.style.strokeThickness;
+	this.canvas.height = lineHeight * lines.length;
+
+	//set canvas text styles
+	this.context.fillStyle = this.style.fill;
+	this.context.font = this.style.font;
+	
+	this.context.strokeStyle = this.style.stroke;
+	this.context.lineWidth = this.style.strokeThickness;
+
+	this.context.textBaseline = "top";
+
+	//draw lines line by line
+	for (i = 0; i < lines.length; i++)
+	{
+		var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight);
+	
+		if(this.style.align == "right")
+		{
+			linePosition.x += maxLineWidth - lineWidths[i];
+		}
+		else if(this.style.align == "center")
+		{
+			linePosition.x += (maxLineWidth - lineWidths[i]) / 2;
+		}
+
+		if(this.style.stroke && this.style.strokeThickness)
+		{
+			this.context.strokeText(lines[i], linePosition.x, linePosition.y);
+		}
+
+		if(this.style.fill)
+		{
+			this.context.fillText(lines[i], linePosition.x, linePosition.y);
+		}
+	}
+	
+    this.updateTexture();
+};
+
+/**
+ * Updates texture size based on canvas size
+ * @private
+ */
+PIXI.Text.prototype.updateTexture = function()
+{
+
+    this.texture.baseTexture.width = this.canvas.width;
+    this.texture.baseTexture.height = this.canvas.height;
+    this.texture.frame.width = this.canvas.width;
+    this.texture.frame.height = this.canvas.height;
+    PIXI.texturesToUpdate.push(this.texture.baseTexture);
+};
+
+/**
+ * @private
+ */
+PIXI.Text.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+		this.updateText();	
+		this.dirty = false;
+	}
+	
+	PIXI.Sprite.prototype.updateTransform.call(this);
+};
+
+/*
+ * http://stackoverflow.com/users/34441/ellisbben
+ * great solution to the problem!
+ */
+PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
+{
+	// build a little reference dictionary so if the font style has been used return a
+	// cached version...
+	var result = PIXI.Text.heightCache[fontStyle];
+	
+	if(!result)
+	{
+		var body = document.getElementsByTagName("body")[0];
+		var dummy = document.createElement("div");
+		var dummyText = document.createTextNode("M");
+		dummy.appendChild(dummyText);
+		dummy.setAttribute("style", fontStyle);
+		body.appendChild(dummy);
+		
+		result = dummy.offsetHeight;
+		PIXI.Text.heightCache[fontStyle] = result;
+		
+		body.removeChild(dummy);
+	}
+	
+	return result;
+};
+
+PIXI.Text.prototype.destroy = function(destroyTexture)
+{
+	if(destroyTexture)
+	{
+		this.texture.destroy();
+	}
+		
+};
+
+PIXI.Text.heightCache = {};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_textures_BaseTexture.js.html b/docs/files/src_pixi_textures_BaseTexture.js.html index a7d8f96..31917f0 100644 --- a/docs/files/src_pixi_textures_BaseTexture.js.html +++ b/docs/files/src_pixi_textures_BaseTexture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_textures_Texture.js.html b/docs/files/src_pixi_textures_Texture.js.html index 35f12dc..ca52cac 100644 --- a/docs/files/src_pixi_textures_Texture.js.html +++ b/docs/files/src_pixi_textures_Texture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_Detector.js.html b/docs/files/src_pixi_utils_Detector.js.html index 6b7d031..62cc770 100644 --- a/docs/files/src_pixi_utils_Detector.js.html +++ b/docs/files/src_pixi_utils_Detector.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_EventTarget.js.html b/docs/files/src_pixi_utils_EventTarget.js.html index 929e6eb..7a794c3 100644 --- a/docs/files/src_pixi_utils_EventTarget.js.html +++ b/docs/files/src_pixi_utils_EventTarget.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_Utils.js.html b/docs/files/src_pixi_utils_Utils.js.html index c6b3b43..e46f12a 100644 --- a/docs/files/src_pixi_utils_Utils.js.html +++ b/docs/files/src_pixi_utils_Utils.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/index.html b/docs/index.html index 36c00da..f277aae 100644 --- a/docs/index.html +++ b/docs/index.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/modules/PIXI.html b/docs/modules/PIXI.html index 3cf7051..d3a42e3 100644 --- a/docs/modules/PIXI.html +++ b/docs/modules/PIXI.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -126,7 +132,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/Stage.js:5
    @@ -161,6 +167,18 @@
  • + + BitmapFontLoader + +
    • + +
  • + + BitmapText + +
    • + +
  • CanvasRenderer @@ -179,6 +197,12 @@
  • + + ImageLoader + +
    • + +
  • InteractionData diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 10 - Text/pixi.js b/examples/example 10 - Text/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 10 - Text/pixi.js +++ b/examples/example 10 - Text/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 2 - SpriteSheet/pixi.js b/examples/example 2 - SpriteSheet/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 2 - SpriteSheet/pixi.js +++ b/examples/example 2 - SpriteSheet/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Text.js.html b/docs/files/src_pixi_Text.js.html deleted file mode 100644 index 33b7cf2..0000000 --- a/docs/files/src_pixi_Text.js.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - src/pixi/Text.js - Pixi.JS - - - - - - - - -
    -
    -
    - -

    - -
    -
    - API Docs for: 1.0.0 -
    -
    -
    - -
    - -
    -
    -
    - Show: - - - - - - - -
    - - -
    -
    -
    -

    File: src/pixi/Text.js

    - -
    - 
    -/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * A Text Object will create a line of text
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.canvas = document.createElement("canvas");
-	
-	this.context = this.canvas.getContext("2d");
-	//document.body.appendChild(this.canvas);
-	this.setText(text);
-	this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
-	
-	this.updateText();
-	
-	PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
-	
-	// need to store a canvas that can
-}
-
-// constructor
-PIXI.Text.constructor = PIXI.Text;
-PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
-
-/**
- * Set the copy for the text object
- * @methos setText
- * @param text {String} The copy that you would like the text to display
- */
-PIXI.Text.prototype.setText = function(text)
-{
-	this.text = text || " ";
-	this.dirty = true;
-}
-
-/**
- * Set the style of the text
- * @method setStyle
- * @constructor
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.fontStyle = fontStyle || "bold 20pt Arial";
-	this.fillStyle = fillStyle;
-	this.strokeStyle = strokeStyle;
-	this.strokeThickness = strokeThickness || 0;
-	
-	this.dirty = true;
-}
-
-/**
- * @private
- */
-PIXI.Text.prototype.updateText = function()
-{
-//	console.log(this.text);
-	this.context.font = this.fontStyle;
-		
-	this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
-	this.canvas.height = this.determineFontHeight("font: " + this.fontStyle  + ";")+ this.strokeThickness;// textDimensions.height;
-
-	this.context.fillStyle = this.fillStyle;
-	this.context.font = this.fontStyle;
-	
-    this.context.strokeStyle = this.strokeStyle;
-	this.context.lineWidth = this.strokeThickness;
-
-	this.context.textBaseline="top"; 
-
-    if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	
-	
-//	console.log("//")
-}
-
-PIXI.Text.prototype.updateTransform = function()
-{
-	if(this.dirty)
-	{
-		this.updateText();	
-		
-		// update the texture..
-		this.texture.baseTexture.width = this.canvas.width;
-		this.texture.baseTexture.height = this.canvas.height;
-		this.texture.frame.width = this.canvas.width;
-		this.texture.frame.height = this.canvas.height;
-		
-		PIXI.texturesToUpdate.push(this.texture.baseTexture);
-		this.dirty = false;
-	}
-	
-	PIXI.Sprite.prototype.updateTransform.call( this );
-}
-
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
-{
-	// build a little refference dictionary so if the font style has been used return a
-	// cached version...
-	var result = PIXI.Text.heightCache[fontStyle]
-	
-	if(!result)
-	{
-		var body = document.getElementsByTagName("body")[0];
-		var dummy = document.createElement("div");
-		var dummyText = document.createTextNode("M");
-		dummy.appendChild(dummyText);
-		dummy.setAttribute("style", fontStyle);
-		body.appendChild(dummy);
-		
-		result = dummy.offsetHeight;
-		PIXI.Text.heightCache[fontStyle] = result
-		
-		body.removeChild(dummy);
-	}
-	
-	return result;
-};
-
-PIXI.Text.prototype.destroy = function(destroyTexture)
-{
-	if(destroyTexture)
-	{
-		this.texture.destroy();
-	}
-		
-}
-
-PIXI.Text.heightCache = {};
-
-
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - diff --git a/docs/files/src_pixi_extras_Rope.js.html b/docs/files/src_pixi_extras_Rope.js.html index 7e2ceff..219f049 100644 --- a/docs/files/src_pixi_extras_Rope.js.html +++ b/docs/files/src_pixi_extras_Rope.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_Strip.js.html b/docs/files/src_pixi_extras_Strip.js.html index 8f748c2..a7a64cd 100644 --- a/docs/files/src_pixi_extras_Strip.js.html +++ b/docs/files/src_pixi_extras_Strip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_TilingSprite.js.html b/docs/files/src_pixi_extras_TilingSprite.js.html index af3d84d..b61c15f 100644 --- a/docs/files/src_pixi_extras_TilingSprite.js.html +++ b/docs/files/src_pixi_extras_TilingSprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_loaders_AssetLoader.js.html b/docs/files/src_pixi_loaders_AssetLoader.js.html index 089d5cf..594481e 100644 --- a/docs/files/src_pixi_loaders_AssetLoader.js.html +++ b/docs/files/src_pixi_loaders_AssetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -127,17 +133,17 @@ */ /** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -145,11 +151,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -169,105 +183,45 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; diff --git a/docs/files/src_pixi_loaders_BitmapFontLoader.js.html b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html new file mode 100644 index 0000000..6fd5d80 --- /dev/null +++ b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html @@ -0,0 +1,275 @@ + + + + + src/pixi/loaders/BitmapFontLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/BitmapFontLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The xml loader is used to load in XML bitmap font data ("xml" or "fnt")
+ * To generate the data you can use http://www.angelcode.com/products/bmfont/
+ * This loader will also load the image file as the data.
+ * When loaded this class will dispatch a "loaded" event
+ * @class BitmapFontLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url the url of the sprite sheet JSON file
+ * @param {Boolean} crossorigin
+ */
+
+PIXI.BitmapFontLoader = function(url, crossorigin)
+{
+    /*
+     * i use texture packer to load the assets..
+     * http://www.codeandweb.com/texturepacker
+     * make sure to set the format as "JSON"
+     */
+    PIXI.EventTarget.call(this);
+    this.url = url;
+    this.baseUrl = url.replace(/[^\/]*$/, "");
+    this.texture = null;
+    this.crossorigin = crossorigin;
+};
+
+// constructor
+PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader;
+
+/**
+ * This will begin loading the JSON file
+ */
+PIXI.BitmapFontLoader.prototype.load = function()
+{
+    this.ajaxRequest = new XMLHttpRequest();
+    var scope = this;
+    this.ajaxRequest.onreadystatechange = function()
+    {
+        scope.onXMLLoaded();
+    };
+
+    this.ajaxRequest.open("GET", this.url, true);
+    if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml");
+    this.ajaxRequest.send(null)
+};
+
+/**
+ * Invoked when XML file is loaded
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
+{
+    if (this.ajaxRequest.readyState == 4)
+    {
+        if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1)
+        {
+            var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue;
+            var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
+            this.texture = image.texture.baseTexture;
+
+            var data = {};
+            var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0];
+            var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0];
+            data.font = info.attributes.getNamedItem("face").nodeValue;
+            data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10);
+            data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10);
+            data.chars = {};
+
+            //parse letters
+            var letters = this.ajaxRequest.responseXML.getElementsByTagName("char");
+
+            for (var i = 0; i < letters.length; i++)
+            {
+                var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10);
+
+                var textureRect = {
+                    x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10),
+                    y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10),
+                    width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10),
+                    height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10)
+                };
+                PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect);
+
+                data.chars[charCode] = {
+                    xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10),
+                    yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10),
+                    xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10),
+                    kerning: {}
+                };
+            }
+
+            //parse kernings
+            var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning");
+            for (i = 0; i < kernings.length; i++)
+            {
+               var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10);
+               var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10);
+               var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10);
+
+                data.chars[second].kerning[first] = amount;
+
+            }
+            PIXI.BitmapText.fonts[data.font] = data;
+
+            var scope = this;
+            image.addEventListener("loaded", function() {
+                scope.onLoaded();
+            });
+            image.load();
+        }
+    }
+};
+
+/**
+ * Invoked when all files are loaded (xml/fnt and texture)
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_ImageLoader.js.html b/docs/files/src_pixi_loaders_ImageLoader.js.html new file mode 100644 index 0000000..f6fcf07 --- /dev/null +++ b/docs/files/src_pixi_loaders_ImageLoader.js.html @@ -0,0 +1,200 @@ + + + + + src/pixi/loaders/ImageLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/ImageLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif")
+ * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
+ * When loaded this class will dispatch a 'loaded' event
+ * @class ImageLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url The url of the image
+ * @param {Boolean} crossorigin
+ */
+PIXI.ImageLoader = function(url, crossorigin)
+{
+    PIXI.EventTarget.call(this);
+    this.texture = PIXI.Texture.fromImage(url, crossorigin);
+};
+
+// constructor
+PIXI.ImageLoader.constructor = PIXI.ImageLoader;
+
+/**
+ * Loads image or takes it from cache
+ */
+PIXI.ImageLoader.prototype.load = function()
+{
+    if(!this.texture.baseTexture.hasLoaded)
+    {
+        var scope = this;
+        this.texture.baseTexture.addEventListener("loaded", function()
+        {
+            scope.onLoaded();
+        });
+    }
+    else
+    {
+        this.onLoaded();
+    }
+};
+
+/**
+ * Invoked when image file is loaded or it is already cached and ready to use
+ * @private
+ */
+PIXI.ImageLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 5510866..3b14d2f 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,30 +136,31 @@ * The sprite sheet loader is used to load in JSON sprite sheet data * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event + * When loaded this class will dispatch a "loaded" event * @class SpriteSheetLoader * @extends EventTarget * @constructor - * @param url {String} the url of the sprite sheet JSON file + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin */ -PIXI.SpriteSheetLoader = function(url) +PIXI.SpriteSheetLoader = function(url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker * make sure to set the format as "JSON" */ - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; this.frames = {}; - this.crossorigin = false; -} + this.crossorigin = crossorigin; +}; // constructor PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; @@ -165,32 +172,38 @@ { this.ajaxRequest = new AjaxRequest(); var scope = this; - this.ajaxRequest.onreadystatechange=function() + this.ajaxRequest.onreadystatechange = function() { - scope.onLoaded(); - } + scope.onJSONLoaded(); + }; - this.ajaxRequest.open("GET", this.url, true) + this.ajaxRequest.open("GET", this.url, true); if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); this.ajaxRequest.send(null) -} +}; -PIXI.SpriteSheetLoader.prototype.onLoaded = function() +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() { - if (this.ajaxRequest.readyState==4) + if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) { var rect = frameData[i].frame; if (rect) @@ -201,32 +214,24 @@ { //var realSize = frameData[i].spriteSourceSize; PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + PIXI.TextureCache[i].trim.x = 0;// (realSize.x / rect.w) // calculate the offset! } - // this.frames[i] = ; } } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; diff --git a/docs/files/src_pixi_renderers_CanvasRenderer.js.html b/docs/files/src_pixi_renderers_CanvasRenderer.js.html index 5598bbd..0b91b46 100644 --- a/docs/files/src_pixi_renderers_CanvasRenderer.js.html +++ b/docs/files/src_pixi_renderers_CanvasRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLBatch.js.html b/docs/files/src_pixi_renderers_WebGLBatch.js.html index 17824ca..95b86b5 100644 --- a/docs/files/src_pixi_renderers_WebGLBatch.js.html +++ b/docs/files/src_pixi_renderers_WebGLBatch.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 0a39149..af0ce9f 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLShaders.js.html b/docs/files/src_pixi_renderers_WebGLShaders.js.html index 40ac3bd..bb52ff9 100644 --- a/docs/files/src_pixi_renderers_WebGLShaders.js.html +++ b/docs/files/src_pixi_renderers_WebGLShaders.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_text_BitmapText.js.html b/docs/files/src_pixi_text_BitmapText.js.html new file mode 100644 index 0000000..9fdae27 --- /dev/null +++ b/docs/files/src_pixi_text_BitmapText.js.html @@ -0,0 +1,306 @@ + + + + + src/pixi/text/BitmapText.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/BitmapText.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text using bitmap font 
+ * You can generate the fnt files using 
+ * http://www.angelcode.com/products/bmfont/ for windows of
+ * http://www.bmglyph.com/ for mac.
+ * @class BitmapText
+ * @extends DisplayObjectContainer
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously)
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+ //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font
+PIXI.BitmapText = function(text, style)
+{
+    PIXI.DisplayObjectContainer.call(this);
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false
+
+};
+
+// constructor
+PIXI.BitmapText.constructor = PIXI.BitmapText;
+PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);
+
+/**
+ * Set the copy for the text object
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.BitmapText.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+PIXI.BitmapText.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.align = style.align || "left";
+    this.style = style;
+
+    var font = style.font.split(" ");
+    this.fontName = font[font.length - 1];
+    this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size;
+
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.BitmapText.prototype.updateText = function()
+{
+    var data = PIXI.BitmapText.fonts[this.fontName];
+    var pos = new PIXI.Point();
+    var prevCharCode = null;
+    var chars = [];
+    var maxLineWidth = 0;
+    var lineWidths = [];
+    var line = 0;
+    var scale = this.fontSize / data.size;
+    for(var i = 0; i < this.text.length; i++)
+    {
+        var charCode = this.text.charCodeAt(i);
+        if(charCode == "\n".charCodeAt(0))
+        {
+            lineWidths.push(pos.x);
+            maxLineWidth = Math.max(maxLineWidth, pos.x);
+            line++;
+
+            pos.x = 0;
+            pos.y += data.lineHeight;
+            prevCharCode = null;
+            continue;
+        }
+        
+        var charData = data.chars[charCode];
+        if(!charData) continue;
+
+        if(prevCharCode && charData[prevCharCode])
+        {
+           pos.x += charData.kerning[prevCharCode];
+        }
+        chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)});
+        pos.x += charData.xAdvance;
+
+        prevCharCode = charCode;
+    }
+
+    lineWidths.push(pos.x);
+    maxLineWidth = Math.max(maxLineWidth, pos.x);
+
+    var lineAlignOffsets = [];
+    for(i = 0; i <= line; i++)
+    {
+        var alignOffset = 0;
+        if(this.style.align == "right")
+        {
+            alignOffset = maxLineWidth - lineWidths[i];
+        }
+        else if(this.style.align == "center")
+        {
+            alignOffset = (maxLineWidth - lineWidths[i]) / 2;
+        }
+        lineAlignOffsets.push(alignOffset);
+    }
+
+    for(i = 0; i < chars.length; i++)
+    {
+        var char = PIXI.Sprite.fromFrame(chars[i].charCode);
+        char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale;
+        char.position.y = chars[i].position.y * scale;
+        char.scale.x = char.scale.y = scale;
+        this.addChild(char);
+    }
+
+    this.width = pos.x * scale;
+    this.height = (pos.y + data.lineHeight) * scale;
+};
+
+/**
+ * @private
+ */
+PIXI.BitmapText.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+        while(this.children.length > 0)
+        {
+            this.removeChild(this.getChildAt(0));
+        }
+        this.updateText();
+
+        this.dirty = false;
+	}
+	
+	PIXI.DisplayObjectContainer.prototype.updateTransform.call(this);
+};
+
+PIXI.BitmapText.fonts = {};
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_text_Text.js.html b/docs/files/src_pixi_text_Text.js.html new file mode 100644 index 0000000..7933074 --- /dev/null +++ b/docs/files/src_pixi_text_Text.js.html @@ -0,0 +1,344 @@ + + + + + src/pixi/text/Text.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/Text.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text to split a line you can use "\n"
+ * @class Text
+ * @extends Sprite
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text = function(text, style)
+{
+    this.canvas = document.createElement("canvas");
+    this.context = this.canvas.getContext("2d");
+    PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas));
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false;
+};
+
+// constructor
+PIXI.Text.constructor = PIXI.Text;
+PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype);
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font="bold 20pt Arial"] The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.font = style.font || "bold 20pt Arial";
+    style.fill = style.fill || "black";
+    style.align = style.align || "left";
+    style.strokeThickness = style.strokeThickness || 0;
+    this.style = style;
+    this.dirty = true;
+};
+
+/**
+ * Set the copy for the text object. To split a line you can use "\n"
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.Sprite.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.Text.prototype.updateText = function()
+{
+	this.context.font = this.style.font;
+
+	//split text into lines
+	var lines = this.text.split("\n");
+
+	//calculate text width
+	var lineWidths = [];
+	var maxLineWidth = 0;
+	for (var i = 0; i < lines.length; i++)
+	{
+		var lineWidth = this.context.measureText(lines[i]).width;
+		lineWidths[i] = lineWidth;
+		maxLineWidth = Math.max(maxLineWidth, lineWidth);
+	}
+	this.canvas.width = maxLineWidth + this.style.strokeThickness;
+	
+	//calculate text height
+	var lineHeight = this.determineFontHeight("font: " + this.style.font  + ";") + this.style.strokeThickness;
+	this.canvas.height = lineHeight * lines.length;
+
+	//set canvas text styles
+	this.context.fillStyle = this.style.fill;
+	this.context.font = this.style.font;
+	
+	this.context.strokeStyle = this.style.stroke;
+	this.context.lineWidth = this.style.strokeThickness;
+
+	this.context.textBaseline = "top";
+
+	//draw lines line by line
+	for (i = 0; i < lines.length; i++)
+	{
+		var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight);
+	
+		if(this.style.align == "right")
+		{
+			linePosition.x += maxLineWidth - lineWidths[i];
+		}
+		else if(this.style.align == "center")
+		{
+			linePosition.x += (maxLineWidth - lineWidths[i]) / 2;
+		}
+
+		if(this.style.stroke && this.style.strokeThickness)
+		{
+			this.context.strokeText(lines[i], linePosition.x, linePosition.y);
+		}
+
+		if(this.style.fill)
+		{
+			this.context.fillText(lines[i], linePosition.x, linePosition.y);
+		}
+	}
+	
+    this.updateTexture();
+};
+
+/**
+ * Updates texture size based on canvas size
+ * @private
+ */
+PIXI.Text.prototype.updateTexture = function()
+{
+
+    this.texture.baseTexture.width = this.canvas.width;
+    this.texture.baseTexture.height = this.canvas.height;
+    this.texture.frame.width = this.canvas.width;
+    this.texture.frame.height = this.canvas.height;
+    PIXI.texturesToUpdate.push(this.texture.baseTexture);
+};
+
+/**
+ * @private
+ */
+PIXI.Text.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+		this.updateText();	
+		this.dirty = false;
+	}
+	
+	PIXI.Sprite.prototype.updateTransform.call(this);
+};
+
+/*
+ * http://stackoverflow.com/users/34441/ellisbben
+ * great solution to the problem!
+ */
+PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
+{
+	// build a little reference dictionary so if the font style has been used return a
+	// cached version...
+	var result = PIXI.Text.heightCache[fontStyle];
+	
+	if(!result)
+	{
+		var body = document.getElementsByTagName("body")[0];
+		var dummy = document.createElement("div");
+		var dummyText = document.createTextNode("M");
+		dummy.appendChild(dummyText);
+		dummy.setAttribute("style", fontStyle);
+		body.appendChild(dummy);
+		
+		result = dummy.offsetHeight;
+		PIXI.Text.heightCache[fontStyle] = result;
+		
+		body.removeChild(dummy);
+	}
+	
+	return result;
+};
+
+PIXI.Text.prototype.destroy = function(destroyTexture)
+{
+	if(destroyTexture)
+	{
+		this.texture.destroy();
+	}
+		
+};
+
+PIXI.Text.heightCache = {};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_textures_BaseTexture.js.html b/docs/files/src_pixi_textures_BaseTexture.js.html index a7d8f96..31917f0 100644 --- a/docs/files/src_pixi_textures_BaseTexture.js.html +++ b/docs/files/src_pixi_textures_BaseTexture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_textures_Texture.js.html b/docs/files/src_pixi_textures_Texture.js.html index 35f12dc..ca52cac 100644 --- a/docs/files/src_pixi_textures_Texture.js.html +++ b/docs/files/src_pixi_textures_Texture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_Detector.js.html b/docs/files/src_pixi_utils_Detector.js.html index 6b7d031..62cc770 100644 --- a/docs/files/src_pixi_utils_Detector.js.html +++ b/docs/files/src_pixi_utils_Detector.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_EventTarget.js.html b/docs/files/src_pixi_utils_EventTarget.js.html index 929e6eb..7a794c3 100644 --- a/docs/files/src_pixi_utils_EventTarget.js.html +++ b/docs/files/src_pixi_utils_EventTarget.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_Utils.js.html b/docs/files/src_pixi_utils_Utils.js.html index c6b3b43..e46f12a 100644 --- a/docs/files/src_pixi_utils_Utils.js.html +++ b/docs/files/src_pixi_utils_Utils.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/index.html b/docs/index.html index 36c00da..f277aae 100644 --- a/docs/index.html +++ b/docs/index.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/modules/PIXI.html b/docs/modules/PIXI.html index 3cf7051..d3a42e3 100644 --- a/docs/modules/PIXI.html +++ b/docs/modules/PIXI.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -126,7 +132,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/Stage.js:5
    @@ -161,6 +167,18 @@
  • + + BitmapFontLoader + +
    • + +
  • + + BitmapText + +
    • + +
  • CanvasRenderer @@ -179,6 +197,12 @@
  • + + ImageLoader + +
    • + +
  • InteractionData diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 10 - Text/pixi.js b/examples/example 10 - Text/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 10 - Text/pixi.js +++ b/examples/example 10 - Text/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 2 - SpriteSheet/pixi.js b/examples/example 2 - SpriteSheet/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 2 - SpriteSheet/pixi.js +++ b/examples/example 2 - SpriteSheet/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 3 - MovieClip/pixi.js b/examples/example 3 - MovieClip/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 3 - MovieClip/pixi.js +++ b/examples/example 3 - MovieClip/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Text.js.html b/docs/files/src_pixi_Text.js.html deleted file mode 100644 index 33b7cf2..0000000 --- a/docs/files/src_pixi_Text.js.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - src/pixi/Text.js - Pixi.JS - - - - - - - - -
    -
    -
    - -

    - -
    -
    - API Docs for: 1.0.0 -
    -
    -
    - -
    - -
    -
    -
    - Show: - - - - - - - -
    - - -
    -
    -
    -

    File: src/pixi/Text.js

    - -
    - 
    -/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * A Text Object will create a line of text
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.canvas = document.createElement("canvas");
-	
-	this.context = this.canvas.getContext("2d");
-	//document.body.appendChild(this.canvas);
-	this.setText(text);
-	this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
-	
-	this.updateText();
-	
-	PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
-	
-	// need to store a canvas that can
-}
-
-// constructor
-PIXI.Text.constructor = PIXI.Text;
-PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
-
-/**
- * Set the copy for the text object
- * @methos setText
- * @param text {String} The copy that you would like the text to display
- */
-PIXI.Text.prototype.setText = function(text)
-{
-	this.text = text || " ";
-	this.dirty = true;
-}
-
-/**
- * Set the style of the text
- * @method setStyle
- * @constructor
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.fontStyle = fontStyle || "bold 20pt Arial";
-	this.fillStyle = fillStyle;
-	this.strokeStyle = strokeStyle;
-	this.strokeThickness = strokeThickness || 0;
-	
-	this.dirty = true;
-}
-
-/**
- * @private
- */
-PIXI.Text.prototype.updateText = function()
-{
-//	console.log(this.text);
-	this.context.font = this.fontStyle;
-		
-	this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
-	this.canvas.height = this.determineFontHeight("font: " + this.fontStyle  + ";")+ this.strokeThickness;// textDimensions.height;
-
-	this.context.fillStyle = this.fillStyle;
-	this.context.font = this.fontStyle;
-	
-    this.context.strokeStyle = this.strokeStyle;
-	this.context.lineWidth = this.strokeThickness;
-
-	this.context.textBaseline="top"; 
-
-    if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	
-	
-//	console.log("//")
-}
-
-PIXI.Text.prototype.updateTransform = function()
-{
-	if(this.dirty)
-	{
-		this.updateText();	
-		
-		// update the texture..
-		this.texture.baseTexture.width = this.canvas.width;
-		this.texture.baseTexture.height = this.canvas.height;
-		this.texture.frame.width = this.canvas.width;
-		this.texture.frame.height = this.canvas.height;
-		
-		PIXI.texturesToUpdate.push(this.texture.baseTexture);
-		this.dirty = false;
-	}
-	
-	PIXI.Sprite.prototype.updateTransform.call( this );
-}
-
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
-{
-	// build a little refference dictionary so if the font style has been used return a
-	// cached version...
-	var result = PIXI.Text.heightCache[fontStyle]
-	
-	if(!result)
-	{
-		var body = document.getElementsByTagName("body")[0];
-		var dummy = document.createElement("div");
-		var dummyText = document.createTextNode("M");
-		dummy.appendChild(dummyText);
-		dummy.setAttribute("style", fontStyle);
-		body.appendChild(dummy);
-		
-		result = dummy.offsetHeight;
-		PIXI.Text.heightCache[fontStyle] = result
-		
-		body.removeChild(dummy);
-	}
-	
-	return result;
-};
-
-PIXI.Text.prototype.destroy = function(destroyTexture)
-{
-	if(destroyTexture)
-	{
-		this.texture.destroy();
-	}
-		
-}
-
-PIXI.Text.heightCache = {};
-
-
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - diff --git a/docs/files/src_pixi_extras_Rope.js.html b/docs/files/src_pixi_extras_Rope.js.html index 7e2ceff..219f049 100644 --- a/docs/files/src_pixi_extras_Rope.js.html +++ b/docs/files/src_pixi_extras_Rope.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_Strip.js.html b/docs/files/src_pixi_extras_Strip.js.html index 8f748c2..a7a64cd 100644 --- a/docs/files/src_pixi_extras_Strip.js.html +++ b/docs/files/src_pixi_extras_Strip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_TilingSprite.js.html b/docs/files/src_pixi_extras_TilingSprite.js.html index af3d84d..b61c15f 100644 --- a/docs/files/src_pixi_extras_TilingSprite.js.html +++ b/docs/files/src_pixi_extras_TilingSprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_loaders_AssetLoader.js.html b/docs/files/src_pixi_loaders_AssetLoader.js.html index 089d5cf..594481e 100644 --- a/docs/files/src_pixi_loaders_AssetLoader.js.html +++ b/docs/files/src_pixi_loaders_AssetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -127,17 +133,17 @@ */ /** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -145,11 +151,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -169,105 +183,45 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; diff --git a/docs/files/src_pixi_loaders_BitmapFontLoader.js.html b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html new file mode 100644 index 0000000..6fd5d80 --- /dev/null +++ b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html @@ -0,0 +1,275 @@ + + + + + src/pixi/loaders/BitmapFontLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/BitmapFontLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The xml loader is used to load in XML bitmap font data ("xml" or "fnt")
+ * To generate the data you can use http://www.angelcode.com/products/bmfont/
+ * This loader will also load the image file as the data.
+ * When loaded this class will dispatch a "loaded" event
+ * @class BitmapFontLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url the url of the sprite sheet JSON file
+ * @param {Boolean} crossorigin
+ */
+
+PIXI.BitmapFontLoader = function(url, crossorigin)
+{
+    /*
+     * i use texture packer to load the assets..
+     * http://www.codeandweb.com/texturepacker
+     * make sure to set the format as "JSON"
+     */
+    PIXI.EventTarget.call(this);
+    this.url = url;
+    this.baseUrl = url.replace(/[^\/]*$/, "");
+    this.texture = null;
+    this.crossorigin = crossorigin;
+};
+
+// constructor
+PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader;
+
+/**
+ * This will begin loading the JSON file
+ */
+PIXI.BitmapFontLoader.prototype.load = function()
+{
+    this.ajaxRequest = new XMLHttpRequest();
+    var scope = this;
+    this.ajaxRequest.onreadystatechange = function()
+    {
+        scope.onXMLLoaded();
+    };
+
+    this.ajaxRequest.open("GET", this.url, true);
+    if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml");
+    this.ajaxRequest.send(null)
+};
+
+/**
+ * Invoked when XML file is loaded
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
+{
+    if (this.ajaxRequest.readyState == 4)
+    {
+        if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1)
+        {
+            var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue;
+            var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
+            this.texture = image.texture.baseTexture;
+
+            var data = {};
+            var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0];
+            var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0];
+            data.font = info.attributes.getNamedItem("face").nodeValue;
+            data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10);
+            data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10);
+            data.chars = {};
+
+            //parse letters
+            var letters = this.ajaxRequest.responseXML.getElementsByTagName("char");
+
+            for (var i = 0; i < letters.length; i++)
+            {
+                var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10);
+
+                var textureRect = {
+                    x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10),
+                    y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10),
+                    width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10),
+                    height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10)
+                };
+                PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect);
+
+                data.chars[charCode] = {
+                    xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10),
+                    yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10),
+                    xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10),
+                    kerning: {}
+                };
+            }
+
+            //parse kernings
+            var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning");
+            for (i = 0; i < kernings.length; i++)
+            {
+               var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10);
+               var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10);
+               var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10);
+
+                data.chars[second].kerning[first] = amount;
+
+            }
+            PIXI.BitmapText.fonts[data.font] = data;
+
+            var scope = this;
+            image.addEventListener("loaded", function() {
+                scope.onLoaded();
+            });
+            image.load();
+        }
+    }
+};
+
+/**
+ * Invoked when all files are loaded (xml/fnt and texture)
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_ImageLoader.js.html b/docs/files/src_pixi_loaders_ImageLoader.js.html new file mode 100644 index 0000000..f6fcf07 --- /dev/null +++ b/docs/files/src_pixi_loaders_ImageLoader.js.html @@ -0,0 +1,200 @@ + + + + + src/pixi/loaders/ImageLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/ImageLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif")
+ * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
+ * When loaded this class will dispatch a 'loaded' event
+ * @class ImageLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url The url of the image
+ * @param {Boolean} crossorigin
+ */
+PIXI.ImageLoader = function(url, crossorigin)
+{
+    PIXI.EventTarget.call(this);
+    this.texture = PIXI.Texture.fromImage(url, crossorigin);
+};
+
+// constructor
+PIXI.ImageLoader.constructor = PIXI.ImageLoader;
+
+/**
+ * Loads image or takes it from cache
+ */
+PIXI.ImageLoader.prototype.load = function()
+{
+    if(!this.texture.baseTexture.hasLoaded)
+    {
+        var scope = this;
+        this.texture.baseTexture.addEventListener("loaded", function()
+        {
+            scope.onLoaded();
+        });
+    }
+    else
+    {
+        this.onLoaded();
+    }
+};
+
+/**
+ * Invoked when image file is loaded or it is already cached and ready to use
+ * @private
+ */
+PIXI.ImageLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 5510866..3b14d2f 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,30 +136,31 @@ * The sprite sheet loader is used to load in JSON sprite sheet data * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event + * When loaded this class will dispatch a "loaded" event * @class SpriteSheetLoader * @extends EventTarget * @constructor - * @param url {String} the url of the sprite sheet JSON file + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin */ -PIXI.SpriteSheetLoader = function(url) +PIXI.SpriteSheetLoader = function(url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker * make sure to set the format as "JSON" */ - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; this.frames = {}; - this.crossorigin = false; -} + this.crossorigin = crossorigin; +}; // constructor PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; @@ -165,32 +172,38 @@ { this.ajaxRequest = new AjaxRequest(); var scope = this; - this.ajaxRequest.onreadystatechange=function() + this.ajaxRequest.onreadystatechange = function() { - scope.onLoaded(); - } + scope.onJSONLoaded(); + }; - this.ajaxRequest.open("GET", this.url, true) + this.ajaxRequest.open("GET", this.url, true); if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); this.ajaxRequest.send(null) -} +}; -PIXI.SpriteSheetLoader.prototype.onLoaded = function() +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() { - if (this.ajaxRequest.readyState==4) + if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) { var rect = frameData[i].frame; if (rect) @@ -201,32 +214,24 @@ { //var realSize = frameData[i].spriteSourceSize; PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + PIXI.TextureCache[i].trim.x = 0;// (realSize.x / rect.w) // calculate the offset! } - // this.frames[i] = ; } } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; diff --git a/docs/files/src_pixi_renderers_CanvasRenderer.js.html b/docs/files/src_pixi_renderers_CanvasRenderer.js.html index 5598bbd..0b91b46 100644 --- a/docs/files/src_pixi_renderers_CanvasRenderer.js.html +++ b/docs/files/src_pixi_renderers_CanvasRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLBatch.js.html b/docs/files/src_pixi_renderers_WebGLBatch.js.html index 17824ca..95b86b5 100644 --- a/docs/files/src_pixi_renderers_WebGLBatch.js.html +++ b/docs/files/src_pixi_renderers_WebGLBatch.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 0a39149..af0ce9f 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLShaders.js.html b/docs/files/src_pixi_renderers_WebGLShaders.js.html index 40ac3bd..bb52ff9 100644 --- a/docs/files/src_pixi_renderers_WebGLShaders.js.html +++ b/docs/files/src_pixi_renderers_WebGLShaders.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_text_BitmapText.js.html b/docs/files/src_pixi_text_BitmapText.js.html new file mode 100644 index 0000000..9fdae27 --- /dev/null +++ b/docs/files/src_pixi_text_BitmapText.js.html @@ -0,0 +1,306 @@ + + + + + src/pixi/text/BitmapText.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/BitmapText.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text using bitmap font 
+ * You can generate the fnt files using 
+ * http://www.angelcode.com/products/bmfont/ for windows of
+ * http://www.bmglyph.com/ for mac.
+ * @class BitmapText
+ * @extends DisplayObjectContainer
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously)
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+ //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font
+PIXI.BitmapText = function(text, style)
+{
+    PIXI.DisplayObjectContainer.call(this);
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false
+
+};
+
+// constructor
+PIXI.BitmapText.constructor = PIXI.BitmapText;
+PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);
+
+/**
+ * Set the copy for the text object
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.BitmapText.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+PIXI.BitmapText.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.align = style.align || "left";
+    this.style = style;
+
+    var font = style.font.split(" ");
+    this.fontName = font[font.length - 1];
+    this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size;
+
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.BitmapText.prototype.updateText = function()
+{
+    var data = PIXI.BitmapText.fonts[this.fontName];
+    var pos = new PIXI.Point();
+    var prevCharCode = null;
+    var chars = [];
+    var maxLineWidth = 0;
+    var lineWidths = [];
+    var line = 0;
+    var scale = this.fontSize / data.size;
+    for(var i = 0; i < this.text.length; i++)
+    {
+        var charCode = this.text.charCodeAt(i);
+        if(charCode == "\n".charCodeAt(0))
+        {
+            lineWidths.push(pos.x);
+            maxLineWidth = Math.max(maxLineWidth, pos.x);
+            line++;
+
+            pos.x = 0;
+            pos.y += data.lineHeight;
+            prevCharCode = null;
+            continue;
+        }
+        
+        var charData = data.chars[charCode];
+        if(!charData) continue;
+
+        if(prevCharCode && charData[prevCharCode])
+        {
+           pos.x += charData.kerning[prevCharCode];
+        }
+        chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)});
+        pos.x += charData.xAdvance;
+
+        prevCharCode = charCode;
+    }
+
+    lineWidths.push(pos.x);
+    maxLineWidth = Math.max(maxLineWidth, pos.x);
+
+    var lineAlignOffsets = [];
+    for(i = 0; i <= line; i++)
+    {
+        var alignOffset = 0;
+        if(this.style.align == "right")
+        {
+            alignOffset = maxLineWidth - lineWidths[i];
+        }
+        else if(this.style.align == "center")
+        {
+            alignOffset = (maxLineWidth - lineWidths[i]) / 2;
+        }
+        lineAlignOffsets.push(alignOffset);
+    }
+
+    for(i = 0; i < chars.length; i++)
+    {
+        var char = PIXI.Sprite.fromFrame(chars[i].charCode);
+        char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale;
+        char.position.y = chars[i].position.y * scale;
+        char.scale.x = char.scale.y = scale;
+        this.addChild(char);
+    }
+
+    this.width = pos.x * scale;
+    this.height = (pos.y + data.lineHeight) * scale;
+};
+
+/**
+ * @private
+ */
+PIXI.BitmapText.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+        while(this.children.length > 0)
+        {
+            this.removeChild(this.getChildAt(0));
+        }
+        this.updateText();
+
+        this.dirty = false;
+	}
+	
+	PIXI.DisplayObjectContainer.prototype.updateTransform.call(this);
+};
+
+PIXI.BitmapText.fonts = {};
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_text_Text.js.html b/docs/files/src_pixi_text_Text.js.html new file mode 100644 index 0000000..7933074 --- /dev/null +++ b/docs/files/src_pixi_text_Text.js.html @@ -0,0 +1,344 @@ + + + + + src/pixi/text/Text.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/Text.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text to split a line you can use "\n"
+ * @class Text
+ * @extends Sprite
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text = function(text, style)
+{
+    this.canvas = document.createElement("canvas");
+    this.context = this.canvas.getContext("2d");
+    PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas));
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false;
+};
+
+// constructor
+PIXI.Text.constructor = PIXI.Text;
+PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype);
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font="bold 20pt Arial"] The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.font = style.font || "bold 20pt Arial";
+    style.fill = style.fill || "black";
+    style.align = style.align || "left";
+    style.strokeThickness = style.strokeThickness || 0;
+    this.style = style;
+    this.dirty = true;
+};
+
+/**
+ * Set the copy for the text object. To split a line you can use "\n"
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.Sprite.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.Text.prototype.updateText = function()
+{
+	this.context.font = this.style.font;
+
+	//split text into lines
+	var lines = this.text.split("\n");
+
+	//calculate text width
+	var lineWidths = [];
+	var maxLineWidth = 0;
+	for (var i = 0; i < lines.length; i++)
+	{
+		var lineWidth = this.context.measureText(lines[i]).width;
+		lineWidths[i] = lineWidth;
+		maxLineWidth = Math.max(maxLineWidth, lineWidth);
+	}
+	this.canvas.width = maxLineWidth + this.style.strokeThickness;
+	
+	//calculate text height
+	var lineHeight = this.determineFontHeight("font: " + this.style.font  + ";") + this.style.strokeThickness;
+	this.canvas.height = lineHeight * lines.length;
+
+	//set canvas text styles
+	this.context.fillStyle = this.style.fill;
+	this.context.font = this.style.font;
+	
+	this.context.strokeStyle = this.style.stroke;
+	this.context.lineWidth = this.style.strokeThickness;
+
+	this.context.textBaseline = "top";
+
+	//draw lines line by line
+	for (i = 0; i < lines.length; i++)
+	{
+		var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight);
+	
+		if(this.style.align == "right")
+		{
+			linePosition.x += maxLineWidth - lineWidths[i];
+		}
+		else if(this.style.align == "center")
+		{
+			linePosition.x += (maxLineWidth - lineWidths[i]) / 2;
+		}
+
+		if(this.style.stroke && this.style.strokeThickness)
+		{
+			this.context.strokeText(lines[i], linePosition.x, linePosition.y);
+		}
+
+		if(this.style.fill)
+		{
+			this.context.fillText(lines[i], linePosition.x, linePosition.y);
+		}
+	}
+	
+    this.updateTexture();
+};
+
+/**
+ * Updates texture size based on canvas size
+ * @private
+ */
+PIXI.Text.prototype.updateTexture = function()
+{
+
+    this.texture.baseTexture.width = this.canvas.width;
+    this.texture.baseTexture.height = this.canvas.height;
+    this.texture.frame.width = this.canvas.width;
+    this.texture.frame.height = this.canvas.height;
+    PIXI.texturesToUpdate.push(this.texture.baseTexture);
+};
+
+/**
+ * @private
+ */
+PIXI.Text.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+		this.updateText();	
+		this.dirty = false;
+	}
+	
+	PIXI.Sprite.prototype.updateTransform.call(this);
+};
+
+/*
+ * http://stackoverflow.com/users/34441/ellisbben
+ * great solution to the problem!
+ */
+PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
+{
+	// build a little reference dictionary so if the font style has been used return a
+	// cached version...
+	var result = PIXI.Text.heightCache[fontStyle];
+	
+	if(!result)
+	{
+		var body = document.getElementsByTagName("body")[0];
+		var dummy = document.createElement("div");
+		var dummyText = document.createTextNode("M");
+		dummy.appendChild(dummyText);
+		dummy.setAttribute("style", fontStyle);
+		body.appendChild(dummy);
+		
+		result = dummy.offsetHeight;
+		PIXI.Text.heightCache[fontStyle] = result;
+		
+		body.removeChild(dummy);
+	}
+	
+	return result;
+};
+
+PIXI.Text.prototype.destroy = function(destroyTexture)
+{
+	if(destroyTexture)
+	{
+		this.texture.destroy();
+	}
+		
+};
+
+PIXI.Text.heightCache = {};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_textures_BaseTexture.js.html b/docs/files/src_pixi_textures_BaseTexture.js.html index a7d8f96..31917f0 100644 --- a/docs/files/src_pixi_textures_BaseTexture.js.html +++ b/docs/files/src_pixi_textures_BaseTexture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_textures_Texture.js.html b/docs/files/src_pixi_textures_Texture.js.html index 35f12dc..ca52cac 100644 --- a/docs/files/src_pixi_textures_Texture.js.html +++ b/docs/files/src_pixi_textures_Texture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_Detector.js.html b/docs/files/src_pixi_utils_Detector.js.html index 6b7d031..62cc770 100644 --- a/docs/files/src_pixi_utils_Detector.js.html +++ b/docs/files/src_pixi_utils_Detector.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_EventTarget.js.html b/docs/files/src_pixi_utils_EventTarget.js.html index 929e6eb..7a794c3 100644 --- a/docs/files/src_pixi_utils_EventTarget.js.html +++ b/docs/files/src_pixi_utils_EventTarget.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_Utils.js.html b/docs/files/src_pixi_utils_Utils.js.html index c6b3b43..e46f12a 100644 --- a/docs/files/src_pixi_utils_Utils.js.html +++ b/docs/files/src_pixi_utils_Utils.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/index.html b/docs/index.html index 36c00da..f277aae 100644 --- a/docs/index.html +++ b/docs/index.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/modules/PIXI.html b/docs/modules/PIXI.html index 3cf7051..d3a42e3 100644 --- a/docs/modules/PIXI.html +++ b/docs/modules/PIXI.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -126,7 +132,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/Stage.js:5
    @@ -161,6 +167,18 @@
  • + + BitmapFontLoader + +
    • + +
  • + + BitmapText + +
    • + +
  • CanvasRenderer @@ -179,6 +197,12 @@
  • + + ImageLoader + +
    • + +
  • InteractionData diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 10 - Text/pixi.js b/examples/example 10 - Text/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 10 - Text/pixi.js +++ b/examples/example 10 - Text/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 2 - SpriteSheet/pixi.js b/examples/example 2 - SpriteSheet/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 2 - SpriteSheet/pixi.js +++ b/examples/example 2 - SpriteSheet/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 3 - MovieClip/pixi.js b/examples/example 3 - MovieClip/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 3 - MovieClip/pixi.js +++ b/examples/example 3 - MovieClip/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 4 - Balls/pixi.js b/examples/example 4 - Balls/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 4 - Balls/pixi.js +++ b/examples/example 4 - Balls/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Text.js.html b/docs/files/src_pixi_Text.js.html deleted file mode 100644 index 33b7cf2..0000000 --- a/docs/files/src_pixi_Text.js.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - src/pixi/Text.js - Pixi.JS - - - - - - - - -
    -
    -
    - -

    - -
    -
    - API Docs for: 1.0.0 -
    -
    -
    - -
    - -
    -
    -
    - Show: - - - - - - - -
    - - -
    -
    -
    -

    File: src/pixi/Text.js

    - -
    - 
    -/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * A Text Object will create a line of text
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.canvas = document.createElement("canvas");
-	
-	this.context = this.canvas.getContext("2d");
-	//document.body.appendChild(this.canvas);
-	this.setText(text);
-	this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
-	
-	this.updateText();
-	
-	PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
-	
-	// need to store a canvas that can
-}
-
-// constructor
-PIXI.Text.constructor = PIXI.Text;
-PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
-
-/**
- * Set the copy for the text object
- * @methos setText
- * @param text {String} The copy that you would like the text to display
- */
-PIXI.Text.prototype.setText = function(text)
-{
-	this.text = text || " ";
-	this.dirty = true;
-}
-
-/**
- * Set the style of the text
- * @method setStyle
- * @constructor
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.fontStyle = fontStyle || "bold 20pt Arial";
-	this.fillStyle = fillStyle;
-	this.strokeStyle = strokeStyle;
-	this.strokeThickness = strokeThickness || 0;
-	
-	this.dirty = true;
-}
-
-/**
- * @private
- */
-PIXI.Text.prototype.updateText = function()
-{
-//	console.log(this.text);
-	this.context.font = this.fontStyle;
-		
-	this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
-	this.canvas.height = this.determineFontHeight("font: " + this.fontStyle  + ";")+ this.strokeThickness;// textDimensions.height;
-
-	this.context.fillStyle = this.fillStyle;
-	this.context.font = this.fontStyle;
-	
-    this.context.strokeStyle = this.strokeStyle;
-	this.context.lineWidth = this.strokeThickness;
-
-	this.context.textBaseline="top"; 
-
-    if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	
-	
-//	console.log("//")
-}
-
-PIXI.Text.prototype.updateTransform = function()
-{
-	if(this.dirty)
-	{
-		this.updateText();	
-		
-		// update the texture..
-		this.texture.baseTexture.width = this.canvas.width;
-		this.texture.baseTexture.height = this.canvas.height;
-		this.texture.frame.width = this.canvas.width;
-		this.texture.frame.height = this.canvas.height;
-		
-		PIXI.texturesToUpdate.push(this.texture.baseTexture);
-		this.dirty = false;
-	}
-	
-	PIXI.Sprite.prototype.updateTransform.call( this );
-}
-
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
-{
-	// build a little refference dictionary so if the font style has been used return a
-	// cached version...
-	var result = PIXI.Text.heightCache[fontStyle]
-	
-	if(!result)
-	{
-		var body = document.getElementsByTagName("body")[0];
-		var dummy = document.createElement("div");
-		var dummyText = document.createTextNode("M");
-		dummy.appendChild(dummyText);
-		dummy.setAttribute("style", fontStyle);
-		body.appendChild(dummy);
-		
-		result = dummy.offsetHeight;
-		PIXI.Text.heightCache[fontStyle] = result
-		
-		body.removeChild(dummy);
-	}
-	
-	return result;
-};
-
-PIXI.Text.prototype.destroy = function(destroyTexture)
-{
-	if(destroyTexture)
-	{
-		this.texture.destroy();
-	}
-		
-}
-
-PIXI.Text.heightCache = {};
-
-
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - diff --git a/docs/files/src_pixi_extras_Rope.js.html b/docs/files/src_pixi_extras_Rope.js.html index 7e2ceff..219f049 100644 --- a/docs/files/src_pixi_extras_Rope.js.html +++ b/docs/files/src_pixi_extras_Rope.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_Strip.js.html b/docs/files/src_pixi_extras_Strip.js.html index 8f748c2..a7a64cd 100644 --- a/docs/files/src_pixi_extras_Strip.js.html +++ b/docs/files/src_pixi_extras_Strip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_TilingSprite.js.html b/docs/files/src_pixi_extras_TilingSprite.js.html index af3d84d..b61c15f 100644 --- a/docs/files/src_pixi_extras_TilingSprite.js.html +++ b/docs/files/src_pixi_extras_TilingSprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_loaders_AssetLoader.js.html b/docs/files/src_pixi_loaders_AssetLoader.js.html index 089d5cf..594481e 100644 --- a/docs/files/src_pixi_loaders_AssetLoader.js.html +++ b/docs/files/src_pixi_loaders_AssetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -127,17 +133,17 @@ */ /** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -145,11 +151,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -169,105 +183,45 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; diff --git a/docs/files/src_pixi_loaders_BitmapFontLoader.js.html b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html new file mode 100644 index 0000000..6fd5d80 --- /dev/null +++ b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html @@ -0,0 +1,275 @@ + + + + + src/pixi/loaders/BitmapFontLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/BitmapFontLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The xml loader is used to load in XML bitmap font data ("xml" or "fnt")
+ * To generate the data you can use http://www.angelcode.com/products/bmfont/
+ * This loader will also load the image file as the data.
+ * When loaded this class will dispatch a "loaded" event
+ * @class BitmapFontLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url the url of the sprite sheet JSON file
+ * @param {Boolean} crossorigin
+ */
+
+PIXI.BitmapFontLoader = function(url, crossorigin)
+{
+    /*
+     * i use texture packer to load the assets..
+     * http://www.codeandweb.com/texturepacker
+     * make sure to set the format as "JSON"
+     */
+    PIXI.EventTarget.call(this);
+    this.url = url;
+    this.baseUrl = url.replace(/[^\/]*$/, "");
+    this.texture = null;
+    this.crossorigin = crossorigin;
+};
+
+// constructor
+PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader;
+
+/**
+ * This will begin loading the JSON file
+ */
+PIXI.BitmapFontLoader.prototype.load = function()
+{
+    this.ajaxRequest = new XMLHttpRequest();
+    var scope = this;
+    this.ajaxRequest.onreadystatechange = function()
+    {
+        scope.onXMLLoaded();
+    };
+
+    this.ajaxRequest.open("GET", this.url, true);
+    if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml");
+    this.ajaxRequest.send(null)
+};
+
+/**
+ * Invoked when XML file is loaded
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
+{
+    if (this.ajaxRequest.readyState == 4)
+    {
+        if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1)
+        {
+            var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue;
+            var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
+            this.texture = image.texture.baseTexture;
+
+            var data = {};
+            var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0];
+            var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0];
+            data.font = info.attributes.getNamedItem("face").nodeValue;
+            data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10);
+            data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10);
+            data.chars = {};
+
+            //parse letters
+            var letters = this.ajaxRequest.responseXML.getElementsByTagName("char");
+
+            for (var i = 0; i < letters.length; i++)
+            {
+                var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10);
+
+                var textureRect = {
+                    x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10),
+                    y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10),
+                    width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10),
+                    height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10)
+                };
+                PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect);
+
+                data.chars[charCode] = {
+                    xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10),
+                    yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10),
+                    xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10),
+                    kerning: {}
+                };
+            }
+
+            //parse kernings
+            var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning");
+            for (i = 0; i < kernings.length; i++)
+            {
+               var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10);
+               var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10);
+               var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10);
+
+                data.chars[second].kerning[first] = amount;
+
+            }
+            PIXI.BitmapText.fonts[data.font] = data;
+
+            var scope = this;
+            image.addEventListener("loaded", function() {
+                scope.onLoaded();
+            });
+            image.load();
+        }
+    }
+};
+
+/**
+ * Invoked when all files are loaded (xml/fnt and texture)
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_ImageLoader.js.html b/docs/files/src_pixi_loaders_ImageLoader.js.html new file mode 100644 index 0000000..f6fcf07 --- /dev/null +++ b/docs/files/src_pixi_loaders_ImageLoader.js.html @@ -0,0 +1,200 @@ + + + + + src/pixi/loaders/ImageLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/ImageLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif")
+ * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
+ * When loaded this class will dispatch a 'loaded' event
+ * @class ImageLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url The url of the image
+ * @param {Boolean} crossorigin
+ */
+PIXI.ImageLoader = function(url, crossorigin)
+{
+    PIXI.EventTarget.call(this);
+    this.texture = PIXI.Texture.fromImage(url, crossorigin);
+};
+
+// constructor
+PIXI.ImageLoader.constructor = PIXI.ImageLoader;
+
+/**
+ * Loads image or takes it from cache
+ */
+PIXI.ImageLoader.prototype.load = function()
+{
+    if(!this.texture.baseTexture.hasLoaded)
+    {
+        var scope = this;
+        this.texture.baseTexture.addEventListener("loaded", function()
+        {
+            scope.onLoaded();
+        });
+    }
+    else
+    {
+        this.onLoaded();
+    }
+};
+
+/**
+ * Invoked when image file is loaded or it is already cached and ready to use
+ * @private
+ */
+PIXI.ImageLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 5510866..3b14d2f 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,30 +136,31 @@ * The sprite sheet loader is used to load in JSON sprite sheet data * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event + * When loaded this class will dispatch a "loaded" event * @class SpriteSheetLoader * @extends EventTarget * @constructor - * @param url {String} the url of the sprite sheet JSON file + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin */ -PIXI.SpriteSheetLoader = function(url) +PIXI.SpriteSheetLoader = function(url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker * make sure to set the format as "JSON" */ - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; this.frames = {}; - this.crossorigin = false; -} + this.crossorigin = crossorigin; +}; // constructor PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; @@ -165,32 +172,38 @@ { this.ajaxRequest = new AjaxRequest(); var scope = this; - this.ajaxRequest.onreadystatechange=function() + this.ajaxRequest.onreadystatechange = function() { - scope.onLoaded(); - } + scope.onJSONLoaded(); + }; - this.ajaxRequest.open("GET", this.url, true) + this.ajaxRequest.open("GET", this.url, true); if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); this.ajaxRequest.send(null) -} +}; -PIXI.SpriteSheetLoader.prototype.onLoaded = function() +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() { - if (this.ajaxRequest.readyState==4) + if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) { var rect = frameData[i].frame; if (rect) @@ -201,32 +214,24 @@ { //var realSize = frameData[i].spriteSourceSize; PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + PIXI.TextureCache[i].trim.x = 0;// (realSize.x / rect.w) // calculate the offset! } - // this.frames[i] = ; } } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; diff --git a/docs/files/src_pixi_renderers_CanvasRenderer.js.html b/docs/files/src_pixi_renderers_CanvasRenderer.js.html index 5598bbd..0b91b46 100644 --- a/docs/files/src_pixi_renderers_CanvasRenderer.js.html +++ b/docs/files/src_pixi_renderers_CanvasRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLBatch.js.html b/docs/files/src_pixi_renderers_WebGLBatch.js.html index 17824ca..95b86b5 100644 --- a/docs/files/src_pixi_renderers_WebGLBatch.js.html +++ b/docs/files/src_pixi_renderers_WebGLBatch.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 0a39149..af0ce9f 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLShaders.js.html b/docs/files/src_pixi_renderers_WebGLShaders.js.html index 40ac3bd..bb52ff9 100644 --- a/docs/files/src_pixi_renderers_WebGLShaders.js.html +++ b/docs/files/src_pixi_renderers_WebGLShaders.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_text_BitmapText.js.html b/docs/files/src_pixi_text_BitmapText.js.html new file mode 100644 index 0000000..9fdae27 --- /dev/null +++ b/docs/files/src_pixi_text_BitmapText.js.html @@ -0,0 +1,306 @@ + + + + + src/pixi/text/BitmapText.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/BitmapText.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text using bitmap font 
+ * You can generate the fnt files using 
+ * http://www.angelcode.com/products/bmfont/ for windows of
+ * http://www.bmglyph.com/ for mac.
+ * @class BitmapText
+ * @extends DisplayObjectContainer
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously)
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+ //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font
+PIXI.BitmapText = function(text, style)
+{
+    PIXI.DisplayObjectContainer.call(this);
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false
+
+};
+
+// constructor
+PIXI.BitmapText.constructor = PIXI.BitmapText;
+PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);
+
+/**
+ * Set the copy for the text object
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.BitmapText.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+PIXI.BitmapText.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.align = style.align || "left";
+    this.style = style;
+
+    var font = style.font.split(" ");
+    this.fontName = font[font.length - 1];
+    this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size;
+
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.BitmapText.prototype.updateText = function()
+{
+    var data = PIXI.BitmapText.fonts[this.fontName];
+    var pos = new PIXI.Point();
+    var prevCharCode = null;
+    var chars = [];
+    var maxLineWidth = 0;
+    var lineWidths = [];
+    var line = 0;
+    var scale = this.fontSize / data.size;
+    for(var i = 0; i < this.text.length; i++)
+    {
+        var charCode = this.text.charCodeAt(i);
+        if(charCode == "\n".charCodeAt(0))
+        {
+            lineWidths.push(pos.x);
+            maxLineWidth = Math.max(maxLineWidth, pos.x);
+            line++;
+
+            pos.x = 0;
+            pos.y += data.lineHeight;
+            prevCharCode = null;
+            continue;
+        }
+        
+        var charData = data.chars[charCode];
+        if(!charData) continue;
+
+        if(prevCharCode && charData[prevCharCode])
+        {
+           pos.x += charData.kerning[prevCharCode];
+        }
+        chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)});
+        pos.x += charData.xAdvance;
+
+        prevCharCode = charCode;
+    }
+
+    lineWidths.push(pos.x);
+    maxLineWidth = Math.max(maxLineWidth, pos.x);
+
+    var lineAlignOffsets = [];
+    for(i = 0; i <= line; i++)
+    {
+        var alignOffset = 0;
+        if(this.style.align == "right")
+        {
+            alignOffset = maxLineWidth - lineWidths[i];
+        }
+        else if(this.style.align == "center")
+        {
+            alignOffset = (maxLineWidth - lineWidths[i]) / 2;
+        }
+        lineAlignOffsets.push(alignOffset);
+    }
+
+    for(i = 0; i < chars.length; i++)
+    {
+        var char = PIXI.Sprite.fromFrame(chars[i].charCode);
+        char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale;
+        char.position.y = chars[i].position.y * scale;
+        char.scale.x = char.scale.y = scale;
+        this.addChild(char);
+    }
+
+    this.width = pos.x * scale;
+    this.height = (pos.y + data.lineHeight) * scale;
+};
+
+/**
+ * @private
+ */
+PIXI.BitmapText.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+        while(this.children.length > 0)
+        {
+            this.removeChild(this.getChildAt(0));
+        }
+        this.updateText();
+
+        this.dirty = false;
+	}
+	
+	PIXI.DisplayObjectContainer.prototype.updateTransform.call(this);
+};
+
+PIXI.BitmapText.fonts = {};
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_text_Text.js.html b/docs/files/src_pixi_text_Text.js.html new file mode 100644 index 0000000..7933074 --- /dev/null +++ b/docs/files/src_pixi_text_Text.js.html @@ -0,0 +1,344 @@ + + + + + src/pixi/text/Text.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/Text.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text to split a line you can use "\n"
+ * @class Text
+ * @extends Sprite
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text = function(text, style)
+{
+    this.canvas = document.createElement("canvas");
+    this.context = this.canvas.getContext("2d");
+    PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas));
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false;
+};
+
+// constructor
+PIXI.Text.constructor = PIXI.Text;
+PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype);
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font="bold 20pt Arial"] The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.font = style.font || "bold 20pt Arial";
+    style.fill = style.fill || "black";
+    style.align = style.align || "left";
+    style.strokeThickness = style.strokeThickness || 0;
+    this.style = style;
+    this.dirty = true;
+};
+
+/**
+ * Set the copy for the text object. To split a line you can use "\n"
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.Sprite.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.Text.prototype.updateText = function()
+{
+	this.context.font = this.style.font;
+
+	//split text into lines
+	var lines = this.text.split("\n");
+
+	//calculate text width
+	var lineWidths = [];
+	var maxLineWidth = 0;
+	for (var i = 0; i < lines.length; i++)
+	{
+		var lineWidth = this.context.measureText(lines[i]).width;
+		lineWidths[i] = lineWidth;
+		maxLineWidth = Math.max(maxLineWidth, lineWidth);
+	}
+	this.canvas.width = maxLineWidth + this.style.strokeThickness;
+	
+	//calculate text height
+	var lineHeight = this.determineFontHeight("font: " + this.style.font  + ";") + this.style.strokeThickness;
+	this.canvas.height = lineHeight * lines.length;
+
+	//set canvas text styles
+	this.context.fillStyle = this.style.fill;
+	this.context.font = this.style.font;
+	
+	this.context.strokeStyle = this.style.stroke;
+	this.context.lineWidth = this.style.strokeThickness;
+
+	this.context.textBaseline = "top";
+
+	//draw lines line by line
+	for (i = 0; i < lines.length; i++)
+	{
+		var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight);
+	
+		if(this.style.align == "right")
+		{
+			linePosition.x += maxLineWidth - lineWidths[i];
+		}
+		else if(this.style.align == "center")
+		{
+			linePosition.x += (maxLineWidth - lineWidths[i]) / 2;
+		}
+
+		if(this.style.stroke && this.style.strokeThickness)
+		{
+			this.context.strokeText(lines[i], linePosition.x, linePosition.y);
+		}
+
+		if(this.style.fill)
+		{
+			this.context.fillText(lines[i], linePosition.x, linePosition.y);
+		}
+	}
+	
+    this.updateTexture();
+};
+
+/**
+ * Updates texture size based on canvas size
+ * @private
+ */
+PIXI.Text.prototype.updateTexture = function()
+{
+
+    this.texture.baseTexture.width = this.canvas.width;
+    this.texture.baseTexture.height = this.canvas.height;
+    this.texture.frame.width = this.canvas.width;
+    this.texture.frame.height = this.canvas.height;
+    PIXI.texturesToUpdate.push(this.texture.baseTexture);
+};
+
+/**
+ * @private
+ */
+PIXI.Text.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+		this.updateText();	
+		this.dirty = false;
+	}
+	
+	PIXI.Sprite.prototype.updateTransform.call(this);
+};
+
+/*
+ * http://stackoverflow.com/users/34441/ellisbben
+ * great solution to the problem!
+ */
+PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
+{
+	// build a little reference dictionary so if the font style has been used return a
+	// cached version...
+	var result = PIXI.Text.heightCache[fontStyle];
+	
+	if(!result)
+	{
+		var body = document.getElementsByTagName("body")[0];
+		var dummy = document.createElement("div");
+		var dummyText = document.createTextNode("M");
+		dummy.appendChild(dummyText);
+		dummy.setAttribute("style", fontStyle);
+		body.appendChild(dummy);
+		
+		result = dummy.offsetHeight;
+		PIXI.Text.heightCache[fontStyle] = result;
+		
+		body.removeChild(dummy);
+	}
+	
+	return result;
+};
+
+PIXI.Text.prototype.destroy = function(destroyTexture)
+{
+	if(destroyTexture)
+	{
+		this.texture.destroy();
+	}
+		
+};
+
+PIXI.Text.heightCache = {};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_textures_BaseTexture.js.html b/docs/files/src_pixi_textures_BaseTexture.js.html index a7d8f96..31917f0 100644 --- a/docs/files/src_pixi_textures_BaseTexture.js.html +++ b/docs/files/src_pixi_textures_BaseTexture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_textures_Texture.js.html b/docs/files/src_pixi_textures_Texture.js.html index 35f12dc..ca52cac 100644 --- a/docs/files/src_pixi_textures_Texture.js.html +++ b/docs/files/src_pixi_textures_Texture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_Detector.js.html b/docs/files/src_pixi_utils_Detector.js.html index 6b7d031..62cc770 100644 --- a/docs/files/src_pixi_utils_Detector.js.html +++ b/docs/files/src_pixi_utils_Detector.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_EventTarget.js.html b/docs/files/src_pixi_utils_EventTarget.js.html index 929e6eb..7a794c3 100644 --- a/docs/files/src_pixi_utils_EventTarget.js.html +++ b/docs/files/src_pixi_utils_EventTarget.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_Utils.js.html b/docs/files/src_pixi_utils_Utils.js.html index c6b3b43..e46f12a 100644 --- a/docs/files/src_pixi_utils_Utils.js.html +++ b/docs/files/src_pixi_utils_Utils.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/index.html b/docs/index.html index 36c00da..f277aae 100644 --- a/docs/index.html +++ b/docs/index.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/modules/PIXI.html b/docs/modules/PIXI.html index 3cf7051..d3a42e3 100644 --- a/docs/modules/PIXI.html +++ b/docs/modules/PIXI.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -126,7 +132,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/Stage.js:5
    @@ -161,6 +167,18 @@
  • + + BitmapFontLoader + +
    • + +
  • + + BitmapText + +
    • + +
  • CanvasRenderer @@ -179,6 +197,12 @@
  • + + ImageLoader + +
    • + +
  • InteractionData diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 10 - Text/pixi.js b/examples/example 10 - Text/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 10 - Text/pixi.js +++ b/examples/example 10 - Text/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 2 - SpriteSheet/pixi.js b/examples/example 2 - SpriteSheet/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 2 - SpriteSheet/pixi.js +++ b/examples/example 2 - SpriteSheet/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 3 - MovieClip/pixi.js b/examples/example 3 - MovieClip/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 3 - MovieClip/pixi.js +++ b/examples/example 3 - MovieClip/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 4 - Balls/pixi.js b/examples/example 4 - Balls/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 4 - Balls/pixi.js +++ b/examples/example 4 - Balls/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 5 - Morph/pixi.js b/examples/example 5 - Morph/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 5 - Morph/pixi.js +++ b/examples/example 5 - Morph/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Text.js.html b/docs/files/src_pixi_Text.js.html deleted file mode 100644 index 33b7cf2..0000000 --- a/docs/files/src_pixi_Text.js.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - src/pixi/Text.js - Pixi.JS - - - - - - - - -
    -
    -
    - -

    - -
    -
    - API Docs for: 1.0.0 -
    -
    -
    - -
    - -
    -
    -
    - Show: - - - - - - - -
    - - -
    -
    -
    -

    File: src/pixi/Text.js

    - -
    - 
    -/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * A Text Object will create a line of text
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.canvas = document.createElement("canvas");
-	
-	this.context = this.canvas.getContext("2d");
-	//document.body.appendChild(this.canvas);
-	this.setText(text);
-	this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
-	
-	this.updateText();
-	
-	PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
-	
-	// need to store a canvas that can
-}
-
-// constructor
-PIXI.Text.constructor = PIXI.Text;
-PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
-
-/**
- * Set the copy for the text object
- * @methos setText
- * @param text {String} The copy that you would like the text to display
- */
-PIXI.Text.prototype.setText = function(text)
-{
-	this.text = text || " ";
-	this.dirty = true;
-}
-
-/**
- * Set the style of the text
- * @method setStyle
- * @constructor
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.fontStyle = fontStyle || "bold 20pt Arial";
-	this.fillStyle = fillStyle;
-	this.strokeStyle = strokeStyle;
-	this.strokeThickness = strokeThickness || 0;
-	
-	this.dirty = true;
-}
-
-/**
- * @private
- */
-PIXI.Text.prototype.updateText = function()
-{
-//	console.log(this.text);
-	this.context.font = this.fontStyle;
-		
-	this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
-	this.canvas.height = this.determineFontHeight("font: " + this.fontStyle  + ";")+ this.strokeThickness;// textDimensions.height;
-
-	this.context.fillStyle = this.fillStyle;
-	this.context.font = this.fontStyle;
-	
-    this.context.strokeStyle = this.strokeStyle;
-	this.context.lineWidth = this.strokeThickness;
-
-	this.context.textBaseline="top"; 
-
-    if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	
-	
-//	console.log("//")
-}
-
-PIXI.Text.prototype.updateTransform = function()
-{
-	if(this.dirty)
-	{
-		this.updateText();	
-		
-		// update the texture..
-		this.texture.baseTexture.width = this.canvas.width;
-		this.texture.baseTexture.height = this.canvas.height;
-		this.texture.frame.width = this.canvas.width;
-		this.texture.frame.height = this.canvas.height;
-		
-		PIXI.texturesToUpdate.push(this.texture.baseTexture);
-		this.dirty = false;
-	}
-	
-	PIXI.Sprite.prototype.updateTransform.call( this );
-}
-
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
-{
-	// build a little refference dictionary so if the font style has been used return a
-	// cached version...
-	var result = PIXI.Text.heightCache[fontStyle]
-	
-	if(!result)
-	{
-		var body = document.getElementsByTagName("body")[0];
-		var dummy = document.createElement("div");
-		var dummyText = document.createTextNode("M");
-		dummy.appendChild(dummyText);
-		dummy.setAttribute("style", fontStyle);
-		body.appendChild(dummy);
-		
-		result = dummy.offsetHeight;
-		PIXI.Text.heightCache[fontStyle] = result
-		
-		body.removeChild(dummy);
-	}
-	
-	return result;
-};
-
-PIXI.Text.prototype.destroy = function(destroyTexture)
-{
-	if(destroyTexture)
-	{
-		this.texture.destroy();
-	}
-		
-}
-
-PIXI.Text.heightCache = {};
-
-
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - diff --git a/docs/files/src_pixi_extras_Rope.js.html b/docs/files/src_pixi_extras_Rope.js.html index 7e2ceff..219f049 100644 --- a/docs/files/src_pixi_extras_Rope.js.html +++ b/docs/files/src_pixi_extras_Rope.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_Strip.js.html b/docs/files/src_pixi_extras_Strip.js.html index 8f748c2..a7a64cd 100644 --- a/docs/files/src_pixi_extras_Strip.js.html +++ b/docs/files/src_pixi_extras_Strip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_TilingSprite.js.html b/docs/files/src_pixi_extras_TilingSprite.js.html index af3d84d..b61c15f 100644 --- a/docs/files/src_pixi_extras_TilingSprite.js.html +++ b/docs/files/src_pixi_extras_TilingSprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_loaders_AssetLoader.js.html b/docs/files/src_pixi_loaders_AssetLoader.js.html index 089d5cf..594481e 100644 --- a/docs/files/src_pixi_loaders_AssetLoader.js.html +++ b/docs/files/src_pixi_loaders_AssetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -127,17 +133,17 @@ */ /** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -145,11 +151,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -169,105 +183,45 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; diff --git a/docs/files/src_pixi_loaders_BitmapFontLoader.js.html b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html new file mode 100644 index 0000000..6fd5d80 --- /dev/null +++ b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html @@ -0,0 +1,275 @@ + + + + + src/pixi/loaders/BitmapFontLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/BitmapFontLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The xml loader is used to load in XML bitmap font data ("xml" or "fnt")
+ * To generate the data you can use http://www.angelcode.com/products/bmfont/
+ * This loader will also load the image file as the data.
+ * When loaded this class will dispatch a "loaded" event
+ * @class BitmapFontLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url the url of the sprite sheet JSON file
+ * @param {Boolean} crossorigin
+ */
+
+PIXI.BitmapFontLoader = function(url, crossorigin)
+{
+    /*
+     * i use texture packer to load the assets..
+     * http://www.codeandweb.com/texturepacker
+     * make sure to set the format as "JSON"
+     */
+    PIXI.EventTarget.call(this);
+    this.url = url;
+    this.baseUrl = url.replace(/[^\/]*$/, "");
+    this.texture = null;
+    this.crossorigin = crossorigin;
+};
+
+// constructor
+PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader;
+
+/**
+ * This will begin loading the JSON file
+ */
+PIXI.BitmapFontLoader.prototype.load = function()
+{
+    this.ajaxRequest = new XMLHttpRequest();
+    var scope = this;
+    this.ajaxRequest.onreadystatechange = function()
+    {
+        scope.onXMLLoaded();
+    };
+
+    this.ajaxRequest.open("GET", this.url, true);
+    if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml");
+    this.ajaxRequest.send(null)
+};
+
+/**
+ * Invoked when XML file is loaded
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
+{
+    if (this.ajaxRequest.readyState == 4)
+    {
+        if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1)
+        {
+            var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue;
+            var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
+            this.texture = image.texture.baseTexture;
+
+            var data = {};
+            var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0];
+            var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0];
+            data.font = info.attributes.getNamedItem("face").nodeValue;
+            data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10);
+            data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10);
+            data.chars = {};
+
+            //parse letters
+            var letters = this.ajaxRequest.responseXML.getElementsByTagName("char");
+
+            for (var i = 0; i < letters.length; i++)
+            {
+                var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10);
+
+                var textureRect = {
+                    x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10),
+                    y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10),
+                    width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10),
+                    height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10)
+                };
+                PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect);
+
+                data.chars[charCode] = {
+                    xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10),
+                    yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10),
+                    xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10),
+                    kerning: {}
+                };
+            }
+
+            //parse kernings
+            var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning");
+            for (i = 0; i < kernings.length; i++)
+            {
+               var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10);
+               var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10);
+               var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10);
+
+                data.chars[second].kerning[first] = amount;
+
+            }
+            PIXI.BitmapText.fonts[data.font] = data;
+
+            var scope = this;
+            image.addEventListener("loaded", function() {
+                scope.onLoaded();
+            });
+            image.load();
+        }
+    }
+};
+
+/**
+ * Invoked when all files are loaded (xml/fnt and texture)
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_ImageLoader.js.html b/docs/files/src_pixi_loaders_ImageLoader.js.html new file mode 100644 index 0000000..f6fcf07 --- /dev/null +++ b/docs/files/src_pixi_loaders_ImageLoader.js.html @@ -0,0 +1,200 @@ + + + + + src/pixi/loaders/ImageLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/ImageLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif")
+ * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
+ * When loaded this class will dispatch a 'loaded' event
+ * @class ImageLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url The url of the image
+ * @param {Boolean} crossorigin
+ */
+PIXI.ImageLoader = function(url, crossorigin)
+{
+    PIXI.EventTarget.call(this);
+    this.texture = PIXI.Texture.fromImage(url, crossorigin);
+};
+
+// constructor
+PIXI.ImageLoader.constructor = PIXI.ImageLoader;
+
+/**
+ * Loads image or takes it from cache
+ */
+PIXI.ImageLoader.prototype.load = function()
+{
+    if(!this.texture.baseTexture.hasLoaded)
+    {
+        var scope = this;
+        this.texture.baseTexture.addEventListener("loaded", function()
+        {
+            scope.onLoaded();
+        });
+    }
+    else
+    {
+        this.onLoaded();
+    }
+};
+
+/**
+ * Invoked when image file is loaded or it is already cached and ready to use
+ * @private
+ */
+PIXI.ImageLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 5510866..3b14d2f 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,30 +136,31 @@ * The sprite sheet loader is used to load in JSON sprite sheet data * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event + * When loaded this class will dispatch a "loaded" event * @class SpriteSheetLoader * @extends EventTarget * @constructor - * @param url {String} the url of the sprite sheet JSON file + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin */ -PIXI.SpriteSheetLoader = function(url) +PIXI.SpriteSheetLoader = function(url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker * make sure to set the format as "JSON" */ - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; this.frames = {}; - this.crossorigin = false; -} + this.crossorigin = crossorigin; +}; // constructor PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; @@ -165,32 +172,38 @@ { this.ajaxRequest = new AjaxRequest(); var scope = this; - this.ajaxRequest.onreadystatechange=function() + this.ajaxRequest.onreadystatechange = function() { - scope.onLoaded(); - } + scope.onJSONLoaded(); + }; - this.ajaxRequest.open("GET", this.url, true) + this.ajaxRequest.open("GET", this.url, true); if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); this.ajaxRequest.send(null) -} +}; -PIXI.SpriteSheetLoader.prototype.onLoaded = function() +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() { - if (this.ajaxRequest.readyState==4) + if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) { var rect = frameData[i].frame; if (rect) @@ -201,32 +214,24 @@ { //var realSize = frameData[i].spriteSourceSize; PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + PIXI.TextureCache[i].trim.x = 0;// (realSize.x / rect.w) // calculate the offset! } - // this.frames[i] = ; } } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; diff --git a/docs/files/src_pixi_renderers_CanvasRenderer.js.html b/docs/files/src_pixi_renderers_CanvasRenderer.js.html index 5598bbd..0b91b46 100644 --- a/docs/files/src_pixi_renderers_CanvasRenderer.js.html +++ b/docs/files/src_pixi_renderers_CanvasRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLBatch.js.html b/docs/files/src_pixi_renderers_WebGLBatch.js.html index 17824ca..95b86b5 100644 --- a/docs/files/src_pixi_renderers_WebGLBatch.js.html +++ b/docs/files/src_pixi_renderers_WebGLBatch.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 0a39149..af0ce9f 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLShaders.js.html b/docs/files/src_pixi_renderers_WebGLShaders.js.html index 40ac3bd..bb52ff9 100644 --- a/docs/files/src_pixi_renderers_WebGLShaders.js.html +++ b/docs/files/src_pixi_renderers_WebGLShaders.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_text_BitmapText.js.html b/docs/files/src_pixi_text_BitmapText.js.html new file mode 100644 index 0000000..9fdae27 --- /dev/null +++ b/docs/files/src_pixi_text_BitmapText.js.html @@ -0,0 +1,306 @@ + + + + + src/pixi/text/BitmapText.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/BitmapText.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text using bitmap font 
+ * You can generate the fnt files using 
+ * http://www.angelcode.com/products/bmfont/ for windows of
+ * http://www.bmglyph.com/ for mac.
+ * @class BitmapText
+ * @extends DisplayObjectContainer
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously)
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+ //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font
+PIXI.BitmapText = function(text, style)
+{
+    PIXI.DisplayObjectContainer.call(this);
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false
+
+};
+
+// constructor
+PIXI.BitmapText.constructor = PIXI.BitmapText;
+PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);
+
+/**
+ * Set the copy for the text object
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.BitmapText.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+PIXI.BitmapText.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.align = style.align || "left";
+    this.style = style;
+
+    var font = style.font.split(" ");
+    this.fontName = font[font.length - 1];
+    this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size;
+
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.BitmapText.prototype.updateText = function()
+{
+    var data = PIXI.BitmapText.fonts[this.fontName];
+    var pos = new PIXI.Point();
+    var prevCharCode = null;
+    var chars = [];
+    var maxLineWidth = 0;
+    var lineWidths = [];
+    var line = 0;
+    var scale = this.fontSize / data.size;
+    for(var i = 0; i < this.text.length; i++)
+    {
+        var charCode = this.text.charCodeAt(i);
+        if(charCode == "\n".charCodeAt(0))
+        {
+            lineWidths.push(pos.x);
+            maxLineWidth = Math.max(maxLineWidth, pos.x);
+            line++;
+
+            pos.x = 0;
+            pos.y += data.lineHeight;
+            prevCharCode = null;
+            continue;
+        }
+        
+        var charData = data.chars[charCode];
+        if(!charData) continue;
+
+        if(prevCharCode && charData[prevCharCode])
+        {
+           pos.x += charData.kerning[prevCharCode];
+        }
+        chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)});
+        pos.x += charData.xAdvance;
+
+        prevCharCode = charCode;
+    }
+
+    lineWidths.push(pos.x);
+    maxLineWidth = Math.max(maxLineWidth, pos.x);
+
+    var lineAlignOffsets = [];
+    for(i = 0; i <= line; i++)
+    {
+        var alignOffset = 0;
+        if(this.style.align == "right")
+        {
+            alignOffset = maxLineWidth - lineWidths[i];
+        }
+        else if(this.style.align == "center")
+        {
+            alignOffset = (maxLineWidth - lineWidths[i]) / 2;
+        }
+        lineAlignOffsets.push(alignOffset);
+    }
+
+    for(i = 0; i < chars.length; i++)
+    {
+        var char = PIXI.Sprite.fromFrame(chars[i].charCode);
+        char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale;
+        char.position.y = chars[i].position.y * scale;
+        char.scale.x = char.scale.y = scale;
+        this.addChild(char);
+    }
+
+    this.width = pos.x * scale;
+    this.height = (pos.y + data.lineHeight) * scale;
+};
+
+/**
+ * @private
+ */
+PIXI.BitmapText.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+        while(this.children.length > 0)
+        {
+            this.removeChild(this.getChildAt(0));
+        }
+        this.updateText();
+
+        this.dirty = false;
+	}
+	
+	PIXI.DisplayObjectContainer.prototype.updateTransform.call(this);
+};
+
+PIXI.BitmapText.fonts = {};
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_text_Text.js.html b/docs/files/src_pixi_text_Text.js.html new file mode 100644 index 0000000..7933074 --- /dev/null +++ b/docs/files/src_pixi_text_Text.js.html @@ -0,0 +1,344 @@ + + + + + src/pixi/text/Text.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/Text.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text to split a line you can use "\n"
+ * @class Text
+ * @extends Sprite
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text = function(text, style)
+{
+    this.canvas = document.createElement("canvas");
+    this.context = this.canvas.getContext("2d");
+    PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas));
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false;
+};
+
+// constructor
+PIXI.Text.constructor = PIXI.Text;
+PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype);
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font="bold 20pt Arial"] The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.font = style.font || "bold 20pt Arial";
+    style.fill = style.fill || "black";
+    style.align = style.align || "left";
+    style.strokeThickness = style.strokeThickness || 0;
+    this.style = style;
+    this.dirty = true;
+};
+
+/**
+ * Set the copy for the text object. To split a line you can use "\n"
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.Sprite.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.Text.prototype.updateText = function()
+{
+	this.context.font = this.style.font;
+
+	//split text into lines
+	var lines = this.text.split("\n");
+
+	//calculate text width
+	var lineWidths = [];
+	var maxLineWidth = 0;
+	for (var i = 0; i < lines.length; i++)
+	{
+		var lineWidth = this.context.measureText(lines[i]).width;
+		lineWidths[i] = lineWidth;
+		maxLineWidth = Math.max(maxLineWidth, lineWidth);
+	}
+	this.canvas.width = maxLineWidth + this.style.strokeThickness;
+	
+	//calculate text height
+	var lineHeight = this.determineFontHeight("font: " + this.style.font  + ";") + this.style.strokeThickness;
+	this.canvas.height = lineHeight * lines.length;
+
+	//set canvas text styles
+	this.context.fillStyle = this.style.fill;
+	this.context.font = this.style.font;
+	
+	this.context.strokeStyle = this.style.stroke;
+	this.context.lineWidth = this.style.strokeThickness;
+
+	this.context.textBaseline = "top";
+
+	//draw lines line by line
+	for (i = 0; i < lines.length; i++)
+	{
+		var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight);
+	
+		if(this.style.align == "right")
+		{
+			linePosition.x += maxLineWidth - lineWidths[i];
+		}
+		else if(this.style.align == "center")
+		{
+			linePosition.x += (maxLineWidth - lineWidths[i]) / 2;
+		}
+
+		if(this.style.stroke && this.style.strokeThickness)
+		{
+			this.context.strokeText(lines[i], linePosition.x, linePosition.y);
+		}
+
+		if(this.style.fill)
+		{
+			this.context.fillText(lines[i], linePosition.x, linePosition.y);
+		}
+	}
+	
+    this.updateTexture();
+};
+
+/**
+ * Updates texture size based on canvas size
+ * @private
+ */
+PIXI.Text.prototype.updateTexture = function()
+{
+
+    this.texture.baseTexture.width = this.canvas.width;
+    this.texture.baseTexture.height = this.canvas.height;
+    this.texture.frame.width = this.canvas.width;
+    this.texture.frame.height = this.canvas.height;
+    PIXI.texturesToUpdate.push(this.texture.baseTexture);
+};
+
+/**
+ * @private
+ */
+PIXI.Text.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+		this.updateText();	
+		this.dirty = false;
+	}
+	
+	PIXI.Sprite.prototype.updateTransform.call(this);
+};
+
+/*
+ * http://stackoverflow.com/users/34441/ellisbben
+ * great solution to the problem!
+ */
+PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
+{
+	// build a little reference dictionary so if the font style has been used return a
+	// cached version...
+	var result = PIXI.Text.heightCache[fontStyle];
+	
+	if(!result)
+	{
+		var body = document.getElementsByTagName("body")[0];
+		var dummy = document.createElement("div");
+		var dummyText = document.createTextNode("M");
+		dummy.appendChild(dummyText);
+		dummy.setAttribute("style", fontStyle);
+		body.appendChild(dummy);
+		
+		result = dummy.offsetHeight;
+		PIXI.Text.heightCache[fontStyle] = result;
+		
+		body.removeChild(dummy);
+	}
+	
+	return result;
+};
+
+PIXI.Text.prototype.destroy = function(destroyTexture)
+{
+	if(destroyTexture)
+	{
+		this.texture.destroy();
+	}
+		
+};
+
+PIXI.Text.heightCache = {};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_textures_BaseTexture.js.html b/docs/files/src_pixi_textures_BaseTexture.js.html index a7d8f96..31917f0 100644 --- a/docs/files/src_pixi_textures_BaseTexture.js.html +++ b/docs/files/src_pixi_textures_BaseTexture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_textures_Texture.js.html b/docs/files/src_pixi_textures_Texture.js.html index 35f12dc..ca52cac 100644 --- a/docs/files/src_pixi_textures_Texture.js.html +++ b/docs/files/src_pixi_textures_Texture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_Detector.js.html b/docs/files/src_pixi_utils_Detector.js.html index 6b7d031..62cc770 100644 --- a/docs/files/src_pixi_utils_Detector.js.html +++ b/docs/files/src_pixi_utils_Detector.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_EventTarget.js.html b/docs/files/src_pixi_utils_EventTarget.js.html index 929e6eb..7a794c3 100644 --- a/docs/files/src_pixi_utils_EventTarget.js.html +++ b/docs/files/src_pixi_utils_EventTarget.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_Utils.js.html b/docs/files/src_pixi_utils_Utils.js.html index c6b3b43..e46f12a 100644 --- a/docs/files/src_pixi_utils_Utils.js.html +++ b/docs/files/src_pixi_utils_Utils.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/index.html b/docs/index.html index 36c00da..f277aae 100644 --- a/docs/index.html +++ b/docs/index.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/modules/PIXI.html b/docs/modules/PIXI.html index 3cf7051..d3a42e3 100644 --- a/docs/modules/PIXI.html +++ b/docs/modules/PIXI.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -126,7 +132,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/Stage.js:5
    @@ -161,6 +167,18 @@
  • + + BitmapFontLoader + +
    • + +
  • + + BitmapText + +
    • + +
  • CanvasRenderer @@ -179,6 +197,12 @@
  • + + ImageLoader + +
    • + +
  • InteractionData diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 10 - Text/pixi.js b/examples/example 10 - Text/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 10 - Text/pixi.js +++ b/examples/example 10 - Text/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 2 - SpriteSheet/pixi.js b/examples/example 2 - SpriteSheet/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 2 - SpriteSheet/pixi.js +++ b/examples/example 2 - SpriteSheet/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 3 - MovieClip/pixi.js b/examples/example 3 - MovieClip/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 3 - MovieClip/pixi.js +++ b/examples/example 3 - MovieClip/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 4 - Balls/pixi.js b/examples/example 4 - Balls/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 4 - Balls/pixi.js +++ b/examples/example 4 - Balls/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 5 - Morph/pixi.js b/examples/example 5 - Morph/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 5 - Morph/pixi.js +++ b/examples/example 5 - Morph/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 6 - Interactivity/pixi.js b/examples/example 6 - Interactivity/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 6 - Interactivity/pixi.js +++ b/examples/example 6 - Interactivity/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Text.js.html b/docs/files/src_pixi_Text.js.html deleted file mode 100644 index 33b7cf2..0000000 --- a/docs/files/src_pixi_Text.js.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - src/pixi/Text.js - Pixi.JS - - - - - - - - -
    -
    -
    - -

    - -
    -
    - API Docs for: 1.0.0 -
    -
    -
    - -
    - -
    -
    -
    - Show: - - - - - - - -
    - - -
    -
    -
    -

    File: src/pixi/Text.js

    - -
    - 
    -/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * A Text Object will create a line of text
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.canvas = document.createElement("canvas");
-	
-	this.context = this.canvas.getContext("2d");
-	//document.body.appendChild(this.canvas);
-	this.setText(text);
-	this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
-	
-	this.updateText();
-	
-	PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
-	
-	// need to store a canvas that can
-}
-
-// constructor
-PIXI.Text.constructor = PIXI.Text;
-PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
-
-/**
- * Set the copy for the text object
- * @methos setText
- * @param text {String} The copy that you would like the text to display
- */
-PIXI.Text.prototype.setText = function(text)
-{
-	this.text = text || " ";
-	this.dirty = true;
-}
-
-/**
- * Set the style of the text
- * @method setStyle
- * @constructor
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.fontStyle = fontStyle || "bold 20pt Arial";
-	this.fillStyle = fillStyle;
-	this.strokeStyle = strokeStyle;
-	this.strokeThickness = strokeThickness || 0;
-	
-	this.dirty = true;
-}
-
-/**
- * @private
- */
-PIXI.Text.prototype.updateText = function()
-{
-//	console.log(this.text);
-	this.context.font = this.fontStyle;
-		
-	this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
-	this.canvas.height = this.determineFontHeight("font: " + this.fontStyle  + ";")+ this.strokeThickness;// textDimensions.height;
-
-	this.context.fillStyle = this.fillStyle;
-	this.context.font = this.fontStyle;
-	
-    this.context.strokeStyle = this.strokeStyle;
-	this.context.lineWidth = this.strokeThickness;
-
-	this.context.textBaseline="top"; 
-
-    if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	
-	
-//	console.log("//")
-}
-
-PIXI.Text.prototype.updateTransform = function()
-{
-	if(this.dirty)
-	{
-		this.updateText();	
-		
-		// update the texture..
-		this.texture.baseTexture.width = this.canvas.width;
-		this.texture.baseTexture.height = this.canvas.height;
-		this.texture.frame.width = this.canvas.width;
-		this.texture.frame.height = this.canvas.height;
-		
-		PIXI.texturesToUpdate.push(this.texture.baseTexture);
-		this.dirty = false;
-	}
-	
-	PIXI.Sprite.prototype.updateTransform.call( this );
-}
-
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
-{
-	// build a little refference dictionary so if the font style has been used return a
-	// cached version...
-	var result = PIXI.Text.heightCache[fontStyle]
-	
-	if(!result)
-	{
-		var body = document.getElementsByTagName("body")[0];
-		var dummy = document.createElement("div");
-		var dummyText = document.createTextNode("M");
-		dummy.appendChild(dummyText);
-		dummy.setAttribute("style", fontStyle);
-		body.appendChild(dummy);
-		
-		result = dummy.offsetHeight;
-		PIXI.Text.heightCache[fontStyle] = result
-		
-		body.removeChild(dummy);
-	}
-	
-	return result;
-};
-
-PIXI.Text.prototype.destroy = function(destroyTexture)
-{
-	if(destroyTexture)
-	{
-		this.texture.destroy();
-	}
-		
-}
-
-PIXI.Text.heightCache = {};
-
-
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - diff --git a/docs/files/src_pixi_extras_Rope.js.html b/docs/files/src_pixi_extras_Rope.js.html index 7e2ceff..219f049 100644 --- a/docs/files/src_pixi_extras_Rope.js.html +++ b/docs/files/src_pixi_extras_Rope.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_Strip.js.html b/docs/files/src_pixi_extras_Strip.js.html index 8f748c2..a7a64cd 100644 --- a/docs/files/src_pixi_extras_Strip.js.html +++ b/docs/files/src_pixi_extras_Strip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_TilingSprite.js.html b/docs/files/src_pixi_extras_TilingSprite.js.html index af3d84d..b61c15f 100644 --- a/docs/files/src_pixi_extras_TilingSprite.js.html +++ b/docs/files/src_pixi_extras_TilingSprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_loaders_AssetLoader.js.html b/docs/files/src_pixi_loaders_AssetLoader.js.html index 089d5cf..594481e 100644 --- a/docs/files/src_pixi_loaders_AssetLoader.js.html +++ b/docs/files/src_pixi_loaders_AssetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -127,17 +133,17 @@ */ /** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -145,11 +151,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -169,105 +183,45 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; diff --git a/docs/files/src_pixi_loaders_BitmapFontLoader.js.html b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html new file mode 100644 index 0000000..6fd5d80 --- /dev/null +++ b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html @@ -0,0 +1,275 @@ + + + + + src/pixi/loaders/BitmapFontLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/BitmapFontLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The xml loader is used to load in XML bitmap font data ("xml" or "fnt")
+ * To generate the data you can use http://www.angelcode.com/products/bmfont/
+ * This loader will also load the image file as the data.
+ * When loaded this class will dispatch a "loaded" event
+ * @class BitmapFontLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url the url of the sprite sheet JSON file
+ * @param {Boolean} crossorigin
+ */
+
+PIXI.BitmapFontLoader = function(url, crossorigin)
+{
+    /*
+     * i use texture packer to load the assets..
+     * http://www.codeandweb.com/texturepacker
+     * make sure to set the format as "JSON"
+     */
+    PIXI.EventTarget.call(this);
+    this.url = url;
+    this.baseUrl = url.replace(/[^\/]*$/, "");
+    this.texture = null;
+    this.crossorigin = crossorigin;
+};
+
+// constructor
+PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader;
+
+/**
+ * This will begin loading the JSON file
+ */
+PIXI.BitmapFontLoader.prototype.load = function()
+{
+    this.ajaxRequest = new XMLHttpRequest();
+    var scope = this;
+    this.ajaxRequest.onreadystatechange = function()
+    {
+        scope.onXMLLoaded();
+    };
+
+    this.ajaxRequest.open("GET", this.url, true);
+    if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml");
+    this.ajaxRequest.send(null)
+};
+
+/**
+ * Invoked when XML file is loaded
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
+{
+    if (this.ajaxRequest.readyState == 4)
+    {
+        if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1)
+        {
+            var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue;
+            var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
+            this.texture = image.texture.baseTexture;
+
+            var data = {};
+            var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0];
+            var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0];
+            data.font = info.attributes.getNamedItem("face").nodeValue;
+            data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10);
+            data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10);
+            data.chars = {};
+
+            //parse letters
+            var letters = this.ajaxRequest.responseXML.getElementsByTagName("char");
+
+            for (var i = 0; i < letters.length; i++)
+            {
+                var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10);
+
+                var textureRect = {
+                    x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10),
+                    y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10),
+                    width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10),
+                    height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10)
+                };
+                PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect);
+
+                data.chars[charCode] = {
+                    xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10),
+                    yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10),
+                    xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10),
+                    kerning: {}
+                };
+            }
+
+            //parse kernings
+            var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning");
+            for (i = 0; i < kernings.length; i++)
+            {
+               var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10);
+               var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10);
+               var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10);
+
+                data.chars[second].kerning[first] = amount;
+
+            }
+            PIXI.BitmapText.fonts[data.font] = data;
+
+            var scope = this;
+            image.addEventListener("loaded", function() {
+                scope.onLoaded();
+            });
+            image.load();
+        }
+    }
+};
+
+/**
+ * Invoked when all files are loaded (xml/fnt and texture)
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_ImageLoader.js.html b/docs/files/src_pixi_loaders_ImageLoader.js.html new file mode 100644 index 0000000..f6fcf07 --- /dev/null +++ b/docs/files/src_pixi_loaders_ImageLoader.js.html @@ -0,0 +1,200 @@ + + + + + src/pixi/loaders/ImageLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/ImageLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif")
+ * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
+ * When loaded this class will dispatch a 'loaded' event
+ * @class ImageLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url The url of the image
+ * @param {Boolean} crossorigin
+ */
+PIXI.ImageLoader = function(url, crossorigin)
+{
+    PIXI.EventTarget.call(this);
+    this.texture = PIXI.Texture.fromImage(url, crossorigin);
+};
+
+// constructor
+PIXI.ImageLoader.constructor = PIXI.ImageLoader;
+
+/**
+ * Loads image or takes it from cache
+ */
+PIXI.ImageLoader.prototype.load = function()
+{
+    if(!this.texture.baseTexture.hasLoaded)
+    {
+        var scope = this;
+        this.texture.baseTexture.addEventListener("loaded", function()
+        {
+            scope.onLoaded();
+        });
+    }
+    else
+    {
+        this.onLoaded();
+    }
+};
+
+/**
+ * Invoked when image file is loaded or it is already cached and ready to use
+ * @private
+ */
+PIXI.ImageLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 5510866..3b14d2f 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,30 +136,31 @@ * The sprite sheet loader is used to load in JSON sprite sheet data * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event + * When loaded this class will dispatch a "loaded" event * @class SpriteSheetLoader * @extends EventTarget * @constructor - * @param url {String} the url of the sprite sheet JSON file + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin */ -PIXI.SpriteSheetLoader = function(url) +PIXI.SpriteSheetLoader = function(url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker * make sure to set the format as "JSON" */ - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; this.frames = {}; - this.crossorigin = false; -} + this.crossorigin = crossorigin; +}; // constructor PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; @@ -165,32 +172,38 @@ { this.ajaxRequest = new AjaxRequest(); var scope = this; - this.ajaxRequest.onreadystatechange=function() + this.ajaxRequest.onreadystatechange = function() { - scope.onLoaded(); - } + scope.onJSONLoaded(); + }; - this.ajaxRequest.open("GET", this.url, true) + this.ajaxRequest.open("GET", this.url, true); if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); this.ajaxRequest.send(null) -} +}; -PIXI.SpriteSheetLoader.prototype.onLoaded = function() +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() { - if (this.ajaxRequest.readyState==4) + if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) { var rect = frameData[i].frame; if (rect) @@ -201,32 +214,24 @@ { //var realSize = frameData[i].spriteSourceSize; PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + PIXI.TextureCache[i].trim.x = 0;// (realSize.x / rect.w) // calculate the offset! } - // this.frames[i] = ; } } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; diff --git a/docs/files/src_pixi_renderers_CanvasRenderer.js.html b/docs/files/src_pixi_renderers_CanvasRenderer.js.html index 5598bbd..0b91b46 100644 --- a/docs/files/src_pixi_renderers_CanvasRenderer.js.html +++ b/docs/files/src_pixi_renderers_CanvasRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLBatch.js.html b/docs/files/src_pixi_renderers_WebGLBatch.js.html index 17824ca..95b86b5 100644 --- a/docs/files/src_pixi_renderers_WebGLBatch.js.html +++ b/docs/files/src_pixi_renderers_WebGLBatch.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 0a39149..af0ce9f 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLShaders.js.html b/docs/files/src_pixi_renderers_WebGLShaders.js.html index 40ac3bd..bb52ff9 100644 --- a/docs/files/src_pixi_renderers_WebGLShaders.js.html +++ b/docs/files/src_pixi_renderers_WebGLShaders.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_text_BitmapText.js.html b/docs/files/src_pixi_text_BitmapText.js.html new file mode 100644 index 0000000..9fdae27 --- /dev/null +++ b/docs/files/src_pixi_text_BitmapText.js.html @@ -0,0 +1,306 @@ + + + + + src/pixi/text/BitmapText.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/BitmapText.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text using bitmap font 
+ * You can generate the fnt files using 
+ * http://www.angelcode.com/products/bmfont/ for windows of
+ * http://www.bmglyph.com/ for mac.
+ * @class BitmapText
+ * @extends DisplayObjectContainer
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously)
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+ //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font
+PIXI.BitmapText = function(text, style)
+{
+    PIXI.DisplayObjectContainer.call(this);
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false
+
+};
+
+// constructor
+PIXI.BitmapText.constructor = PIXI.BitmapText;
+PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);
+
+/**
+ * Set the copy for the text object
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.BitmapText.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+PIXI.BitmapText.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.align = style.align || "left";
+    this.style = style;
+
+    var font = style.font.split(" ");
+    this.fontName = font[font.length - 1];
+    this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size;
+
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.BitmapText.prototype.updateText = function()
+{
+    var data = PIXI.BitmapText.fonts[this.fontName];
+    var pos = new PIXI.Point();
+    var prevCharCode = null;
+    var chars = [];
+    var maxLineWidth = 0;
+    var lineWidths = [];
+    var line = 0;
+    var scale = this.fontSize / data.size;
+    for(var i = 0; i < this.text.length; i++)
+    {
+        var charCode = this.text.charCodeAt(i);
+        if(charCode == "\n".charCodeAt(0))
+        {
+            lineWidths.push(pos.x);
+            maxLineWidth = Math.max(maxLineWidth, pos.x);
+            line++;
+
+            pos.x = 0;
+            pos.y += data.lineHeight;
+            prevCharCode = null;
+            continue;
+        }
+        
+        var charData = data.chars[charCode];
+        if(!charData) continue;
+
+        if(prevCharCode && charData[prevCharCode])
+        {
+           pos.x += charData.kerning[prevCharCode];
+        }
+        chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)});
+        pos.x += charData.xAdvance;
+
+        prevCharCode = charCode;
+    }
+
+    lineWidths.push(pos.x);
+    maxLineWidth = Math.max(maxLineWidth, pos.x);
+
+    var lineAlignOffsets = [];
+    for(i = 0; i <= line; i++)
+    {
+        var alignOffset = 0;
+        if(this.style.align == "right")
+        {
+            alignOffset = maxLineWidth - lineWidths[i];
+        }
+        else if(this.style.align == "center")
+        {
+            alignOffset = (maxLineWidth - lineWidths[i]) / 2;
+        }
+        lineAlignOffsets.push(alignOffset);
+    }
+
+    for(i = 0; i < chars.length; i++)
+    {
+        var char = PIXI.Sprite.fromFrame(chars[i].charCode);
+        char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale;
+        char.position.y = chars[i].position.y * scale;
+        char.scale.x = char.scale.y = scale;
+        this.addChild(char);
+    }
+
+    this.width = pos.x * scale;
+    this.height = (pos.y + data.lineHeight) * scale;
+};
+
+/**
+ * @private
+ */
+PIXI.BitmapText.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+        while(this.children.length > 0)
+        {
+            this.removeChild(this.getChildAt(0));
+        }
+        this.updateText();
+
+        this.dirty = false;
+	}
+	
+	PIXI.DisplayObjectContainer.prototype.updateTransform.call(this);
+};
+
+PIXI.BitmapText.fonts = {};
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_text_Text.js.html b/docs/files/src_pixi_text_Text.js.html new file mode 100644 index 0000000..7933074 --- /dev/null +++ b/docs/files/src_pixi_text_Text.js.html @@ -0,0 +1,344 @@ + + + + + src/pixi/text/Text.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/Text.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text to split a line you can use "\n"
+ * @class Text
+ * @extends Sprite
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text = function(text, style)
+{
+    this.canvas = document.createElement("canvas");
+    this.context = this.canvas.getContext("2d");
+    PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas));
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false;
+};
+
+// constructor
+PIXI.Text.constructor = PIXI.Text;
+PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype);
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font="bold 20pt Arial"] The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.font = style.font || "bold 20pt Arial";
+    style.fill = style.fill || "black";
+    style.align = style.align || "left";
+    style.strokeThickness = style.strokeThickness || 0;
+    this.style = style;
+    this.dirty = true;
+};
+
+/**
+ * Set the copy for the text object. To split a line you can use "\n"
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.Sprite.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.Text.prototype.updateText = function()
+{
+	this.context.font = this.style.font;
+
+	//split text into lines
+	var lines = this.text.split("\n");
+
+	//calculate text width
+	var lineWidths = [];
+	var maxLineWidth = 0;
+	for (var i = 0; i < lines.length; i++)
+	{
+		var lineWidth = this.context.measureText(lines[i]).width;
+		lineWidths[i] = lineWidth;
+		maxLineWidth = Math.max(maxLineWidth, lineWidth);
+	}
+	this.canvas.width = maxLineWidth + this.style.strokeThickness;
+	
+	//calculate text height
+	var lineHeight = this.determineFontHeight("font: " + this.style.font  + ";") + this.style.strokeThickness;
+	this.canvas.height = lineHeight * lines.length;
+
+	//set canvas text styles
+	this.context.fillStyle = this.style.fill;
+	this.context.font = this.style.font;
+	
+	this.context.strokeStyle = this.style.stroke;
+	this.context.lineWidth = this.style.strokeThickness;
+
+	this.context.textBaseline = "top";
+
+	//draw lines line by line
+	for (i = 0; i < lines.length; i++)
+	{
+		var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight);
+	
+		if(this.style.align == "right")
+		{
+			linePosition.x += maxLineWidth - lineWidths[i];
+		}
+		else if(this.style.align == "center")
+		{
+			linePosition.x += (maxLineWidth - lineWidths[i]) / 2;
+		}
+
+		if(this.style.stroke && this.style.strokeThickness)
+		{
+			this.context.strokeText(lines[i], linePosition.x, linePosition.y);
+		}
+
+		if(this.style.fill)
+		{
+			this.context.fillText(lines[i], linePosition.x, linePosition.y);
+		}
+	}
+	
+    this.updateTexture();
+};
+
+/**
+ * Updates texture size based on canvas size
+ * @private
+ */
+PIXI.Text.prototype.updateTexture = function()
+{
+
+    this.texture.baseTexture.width = this.canvas.width;
+    this.texture.baseTexture.height = this.canvas.height;
+    this.texture.frame.width = this.canvas.width;
+    this.texture.frame.height = this.canvas.height;
+    PIXI.texturesToUpdate.push(this.texture.baseTexture);
+};
+
+/**
+ * @private
+ */
+PIXI.Text.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+		this.updateText();	
+		this.dirty = false;
+	}
+	
+	PIXI.Sprite.prototype.updateTransform.call(this);
+};
+
+/*
+ * http://stackoverflow.com/users/34441/ellisbben
+ * great solution to the problem!
+ */
+PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
+{
+	// build a little reference dictionary so if the font style has been used return a
+	// cached version...
+	var result = PIXI.Text.heightCache[fontStyle];
+	
+	if(!result)
+	{
+		var body = document.getElementsByTagName("body")[0];
+		var dummy = document.createElement("div");
+		var dummyText = document.createTextNode("M");
+		dummy.appendChild(dummyText);
+		dummy.setAttribute("style", fontStyle);
+		body.appendChild(dummy);
+		
+		result = dummy.offsetHeight;
+		PIXI.Text.heightCache[fontStyle] = result;
+		
+		body.removeChild(dummy);
+	}
+	
+	return result;
+};
+
+PIXI.Text.prototype.destroy = function(destroyTexture)
+{
+	if(destroyTexture)
+	{
+		this.texture.destroy();
+	}
+		
+};
+
+PIXI.Text.heightCache = {};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_textures_BaseTexture.js.html b/docs/files/src_pixi_textures_BaseTexture.js.html index a7d8f96..31917f0 100644 --- a/docs/files/src_pixi_textures_BaseTexture.js.html +++ b/docs/files/src_pixi_textures_BaseTexture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_textures_Texture.js.html b/docs/files/src_pixi_textures_Texture.js.html index 35f12dc..ca52cac 100644 --- a/docs/files/src_pixi_textures_Texture.js.html +++ b/docs/files/src_pixi_textures_Texture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_Detector.js.html b/docs/files/src_pixi_utils_Detector.js.html index 6b7d031..62cc770 100644 --- a/docs/files/src_pixi_utils_Detector.js.html +++ b/docs/files/src_pixi_utils_Detector.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_EventTarget.js.html b/docs/files/src_pixi_utils_EventTarget.js.html index 929e6eb..7a794c3 100644 --- a/docs/files/src_pixi_utils_EventTarget.js.html +++ b/docs/files/src_pixi_utils_EventTarget.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_Utils.js.html b/docs/files/src_pixi_utils_Utils.js.html index c6b3b43..e46f12a 100644 --- a/docs/files/src_pixi_utils_Utils.js.html +++ b/docs/files/src_pixi_utils_Utils.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/index.html b/docs/index.html index 36c00da..f277aae 100644 --- a/docs/index.html +++ b/docs/index.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/modules/PIXI.html b/docs/modules/PIXI.html index 3cf7051..d3a42e3 100644 --- a/docs/modules/PIXI.html +++ b/docs/modules/PIXI.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -126,7 +132,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/Stage.js:5
    @@ -161,6 +167,18 @@
  • + + BitmapFontLoader + +
    • + +
  • + + BitmapText + +
    • + +
  • CanvasRenderer @@ -179,6 +197,12 @@
  • + + ImageLoader + +
    • + +
  • InteractionData diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 10 - Text/pixi.js b/examples/example 10 - Text/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 10 - Text/pixi.js +++ b/examples/example 10 - Text/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 2 - SpriteSheet/pixi.js b/examples/example 2 - SpriteSheet/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 2 - SpriteSheet/pixi.js +++ b/examples/example 2 - SpriteSheet/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 3 - MovieClip/pixi.js b/examples/example 3 - MovieClip/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 3 - MovieClip/pixi.js +++ b/examples/example 3 - MovieClip/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 4 - Balls/pixi.js b/examples/example 4 - Balls/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 4 - Balls/pixi.js +++ b/examples/example 4 - Balls/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 5 - Morph/pixi.js b/examples/example 5 - Morph/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 5 - Morph/pixi.js +++ b/examples/example 5 - Morph/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 6 - Interactivity/pixi.js b/examples/example 6 - Interactivity/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 6 - Interactivity/pixi.js +++ b/examples/example 6 - Interactivity/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 7 - Transparent Background/pixi.js b/examples/example 7 - Transparent Background/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 7 - Transparent Background/pixi.js +++ b/examples/example 7 - Transparent Background/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Text.js.html b/docs/files/src_pixi_Text.js.html deleted file mode 100644 index 33b7cf2..0000000 --- a/docs/files/src_pixi_Text.js.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - src/pixi/Text.js - Pixi.JS - - - - - - - - -
    -
    -
    - -

    - -
    -
    - API Docs for: 1.0.0 -
    -
    -
    - -
    - -
    -
    -
    - Show: - - - - - - - -
    - - -
    -
    -
    -

    File: src/pixi/Text.js

    - -
    - 
    -/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * A Text Object will create a line of text
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.canvas = document.createElement("canvas");
-	
-	this.context = this.canvas.getContext("2d");
-	//document.body.appendChild(this.canvas);
-	this.setText(text);
-	this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
-	
-	this.updateText();
-	
-	PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
-	
-	// need to store a canvas that can
-}
-
-// constructor
-PIXI.Text.constructor = PIXI.Text;
-PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
-
-/**
- * Set the copy for the text object
- * @methos setText
- * @param text {String} The copy that you would like the text to display
- */
-PIXI.Text.prototype.setText = function(text)
-{
-	this.text = text || " ";
-	this.dirty = true;
-}
-
-/**
- * Set the style of the text
- * @method setStyle
- * @constructor
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.fontStyle = fontStyle || "bold 20pt Arial";
-	this.fillStyle = fillStyle;
-	this.strokeStyle = strokeStyle;
-	this.strokeThickness = strokeThickness || 0;
-	
-	this.dirty = true;
-}
-
-/**
- * @private
- */
-PIXI.Text.prototype.updateText = function()
-{
-//	console.log(this.text);
-	this.context.font = this.fontStyle;
-		
-	this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
-	this.canvas.height = this.determineFontHeight("font: " + this.fontStyle  + ";")+ this.strokeThickness;// textDimensions.height;
-
-	this.context.fillStyle = this.fillStyle;
-	this.context.font = this.fontStyle;
-	
-    this.context.strokeStyle = this.strokeStyle;
-	this.context.lineWidth = this.strokeThickness;
-
-	this.context.textBaseline="top"; 
-
-    if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	
-	
-//	console.log("//")
-}
-
-PIXI.Text.prototype.updateTransform = function()
-{
-	if(this.dirty)
-	{
-		this.updateText();	
-		
-		// update the texture..
-		this.texture.baseTexture.width = this.canvas.width;
-		this.texture.baseTexture.height = this.canvas.height;
-		this.texture.frame.width = this.canvas.width;
-		this.texture.frame.height = this.canvas.height;
-		
-		PIXI.texturesToUpdate.push(this.texture.baseTexture);
-		this.dirty = false;
-	}
-	
-	PIXI.Sprite.prototype.updateTransform.call( this );
-}
-
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
-{
-	// build a little refference dictionary so if the font style has been used return a
-	// cached version...
-	var result = PIXI.Text.heightCache[fontStyle]
-	
-	if(!result)
-	{
-		var body = document.getElementsByTagName("body")[0];
-		var dummy = document.createElement("div");
-		var dummyText = document.createTextNode("M");
-		dummy.appendChild(dummyText);
-		dummy.setAttribute("style", fontStyle);
-		body.appendChild(dummy);
-		
-		result = dummy.offsetHeight;
-		PIXI.Text.heightCache[fontStyle] = result
-		
-		body.removeChild(dummy);
-	}
-	
-	return result;
-};
-
-PIXI.Text.prototype.destroy = function(destroyTexture)
-{
-	if(destroyTexture)
-	{
-		this.texture.destroy();
-	}
-		
-}
-
-PIXI.Text.heightCache = {};
-
-
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - diff --git a/docs/files/src_pixi_extras_Rope.js.html b/docs/files/src_pixi_extras_Rope.js.html index 7e2ceff..219f049 100644 --- a/docs/files/src_pixi_extras_Rope.js.html +++ b/docs/files/src_pixi_extras_Rope.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_Strip.js.html b/docs/files/src_pixi_extras_Strip.js.html index 8f748c2..a7a64cd 100644 --- a/docs/files/src_pixi_extras_Strip.js.html +++ b/docs/files/src_pixi_extras_Strip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_TilingSprite.js.html b/docs/files/src_pixi_extras_TilingSprite.js.html index af3d84d..b61c15f 100644 --- a/docs/files/src_pixi_extras_TilingSprite.js.html +++ b/docs/files/src_pixi_extras_TilingSprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_loaders_AssetLoader.js.html b/docs/files/src_pixi_loaders_AssetLoader.js.html index 089d5cf..594481e 100644 --- a/docs/files/src_pixi_loaders_AssetLoader.js.html +++ b/docs/files/src_pixi_loaders_AssetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -127,17 +133,17 @@ */ /** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -145,11 +151,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -169,105 +183,45 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; diff --git a/docs/files/src_pixi_loaders_BitmapFontLoader.js.html b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html new file mode 100644 index 0000000..6fd5d80 --- /dev/null +++ b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html @@ -0,0 +1,275 @@ + + + + + src/pixi/loaders/BitmapFontLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/BitmapFontLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The xml loader is used to load in XML bitmap font data ("xml" or "fnt")
+ * To generate the data you can use http://www.angelcode.com/products/bmfont/
+ * This loader will also load the image file as the data.
+ * When loaded this class will dispatch a "loaded" event
+ * @class BitmapFontLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url the url of the sprite sheet JSON file
+ * @param {Boolean} crossorigin
+ */
+
+PIXI.BitmapFontLoader = function(url, crossorigin)
+{
+    /*
+     * i use texture packer to load the assets..
+     * http://www.codeandweb.com/texturepacker
+     * make sure to set the format as "JSON"
+     */
+    PIXI.EventTarget.call(this);
+    this.url = url;
+    this.baseUrl = url.replace(/[^\/]*$/, "");
+    this.texture = null;
+    this.crossorigin = crossorigin;
+};
+
+// constructor
+PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader;
+
+/**
+ * This will begin loading the JSON file
+ */
+PIXI.BitmapFontLoader.prototype.load = function()
+{
+    this.ajaxRequest = new XMLHttpRequest();
+    var scope = this;
+    this.ajaxRequest.onreadystatechange = function()
+    {
+        scope.onXMLLoaded();
+    };
+
+    this.ajaxRequest.open("GET", this.url, true);
+    if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml");
+    this.ajaxRequest.send(null)
+};
+
+/**
+ * Invoked when XML file is loaded
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
+{
+    if (this.ajaxRequest.readyState == 4)
+    {
+        if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1)
+        {
+            var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue;
+            var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
+            this.texture = image.texture.baseTexture;
+
+            var data = {};
+            var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0];
+            var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0];
+            data.font = info.attributes.getNamedItem("face").nodeValue;
+            data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10);
+            data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10);
+            data.chars = {};
+
+            //parse letters
+            var letters = this.ajaxRequest.responseXML.getElementsByTagName("char");
+
+            for (var i = 0; i < letters.length; i++)
+            {
+                var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10);
+
+                var textureRect = {
+                    x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10),
+                    y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10),
+                    width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10),
+                    height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10)
+                };
+                PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect);
+
+                data.chars[charCode] = {
+                    xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10),
+                    yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10),
+                    xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10),
+                    kerning: {}
+                };
+            }
+
+            //parse kernings
+            var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning");
+            for (i = 0; i < kernings.length; i++)
+            {
+               var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10);
+               var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10);
+               var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10);
+
+                data.chars[second].kerning[first] = amount;
+
+            }
+            PIXI.BitmapText.fonts[data.font] = data;
+
+            var scope = this;
+            image.addEventListener("loaded", function() {
+                scope.onLoaded();
+            });
+            image.load();
+        }
+    }
+};
+
+/**
+ * Invoked when all files are loaded (xml/fnt and texture)
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_ImageLoader.js.html b/docs/files/src_pixi_loaders_ImageLoader.js.html new file mode 100644 index 0000000..f6fcf07 --- /dev/null +++ b/docs/files/src_pixi_loaders_ImageLoader.js.html @@ -0,0 +1,200 @@ + + + + + src/pixi/loaders/ImageLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/ImageLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif")
+ * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
+ * When loaded this class will dispatch a 'loaded' event
+ * @class ImageLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url The url of the image
+ * @param {Boolean} crossorigin
+ */
+PIXI.ImageLoader = function(url, crossorigin)
+{
+    PIXI.EventTarget.call(this);
+    this.texture = PIXI.Texture.fromImage(url, crossorigin);
+};
+
+// constructor
+PIXI.ImageLoader.constructor = PIXI.ImageLoader;
+
+/**
+ * Loads image or takes it from cache
+ */
+PIXI.ImageLoader.prototype.load = function()
+{
+    if(!this.texture.baseTexture.hasLoaded)
+    {
+        var scope = this;
+        this.texture.baseTexture.addEventListener("loaded", function()
+        {
+            scope.onLoaded();
+        });
+    }
+    else
+    {
+        this.onLoaded();
+    }
+};
+
+/**
+ * Invoked when image file is loaded or it is already cached and ready to use
+ * @private
+ */
+PIXI.ImageLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 5510866..3b14d2f 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,30 +136,31 @@ * The sprite sheet loader is used to load in JSON sprite sheet data * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event + * When loaded this class will dispatch a "loaded" event * @class SpriteSheetLoader * @extends EventTarget * @constructor - * @param url {String} the url of the sprite sheet JSON file + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin */ -PIXI.SpriteSheetLoader = function(url) +PIXI.SpriteSheetLoader = function(url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker * make sure to set the format as "JSON" */ - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; this.frames = {}; - this.crossorigin = false; -} + this.crossorigin = crossorigin; +}; // constructor PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; @@ -165,32 +172,38 @@ { this.ajaxRequest = new AjaxRequest(); var scope = this; - this.ajaxRequest.onreadystatechange=function() + this.ajaxRequest.onreadystatechange = function() { - scope.onLoaded(); - } + scope.onJSONLoaded(); + }; - this.ajaxRequest.open("GET", this.url, true) + this.ajaxRequest.open("GET", this.url, true); if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); this.ajaxRequest.send(null) -} +}; -PIXI.SpriteSheetLoader.prototype.onLoaded = function() +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() { - if (this.ajaxRequest.readyState==4) + if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) { var rect = frameData[i].frame; if (rect) @@ -201,32 +214,24 @@ { //var realSize = frameData[i].spriteSourceSize; PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + PIXI.TextureCache[i].trim.x = 0;// (realSize.x / rect.w) // calculate the offset! } - // this.frames[i] = ; } } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; diff --git a/docs/files/src_pixi_renderers_CanvasRenderer.js.html b/docs/files/src_pixi_renderers_CanvasRenderer.js.html index 5598bbd..0b91b46 100644 --- a/docs/files/src_pixi_renderers_CanvasRenderer.js.html +++ b/docs/files/src_pixi_renderers_CanvasRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLBatch.js.html b/docs/files/src_pixi_renderers_WebGLBatch.js.html index 17824ca..95b86b5 100644 --- a/docs/files/src_pixi_renderers_WebGLBatch.js.html +++ b/docs/files/src_pixi_renderers_WebGLBatch.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 0a39149..af0ce9f 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLShaders.js.html b/docs/files/src_pixi_renderers_WebGLShaders.js.html index 40ac3bd..bb52ff9 100644 --- a/docs/files/src_pixi_renderers_WebGLShaders.js.html +++ b/docs/files/src_pixi_renderers_WebGLShaders.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_text_BitmapText.js.html b/docs/files/src_pixi_text_BitmapText.js.html new file mode 100644 index 0000000..9fdae27 --- /dev/null +++ b/docs/files/src_pixi_text_BitmapText.js.html @@ -0,0 +1,306 @@ + + + + + src/pixi/text/BitmapText.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/BitmapText.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text using bitmap font 
+ * You can generate the fnt files using 
+ * http://www.angelcode.com/products/bmfont/ for windows of
+ * http://www.bmglyph.com/ for mac.
+ * @class BitmapText
+ * @extends DisplayObjectContainer
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously)
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+ //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font
+PIXI.BitmapText = function(text, style)
+{
+    PIXI.DisplayObjectContainer.call(this);
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false
+
+};
+
+// constructor
+PIXI.BitmapText.constructor = PIXI.BitmapText;
+PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);
+
+/**
+ * Set the copy for the text object
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.BitmapText.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+PIXI.BitmapText.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.align = style.align || "left";
+    this.style = style;
+
+    var font = style.font.split(" ");
+    this.fontName = font[font.length - 1];
+    this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size;
+
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.BitmapText.prototype.updateText = function()
+{
+    var data = PIXI.BitmapText.fonts[this.fontName];
+    var pos = new PIXI.Point();
+    var prevCharCode = null;
+    var chars = [];
+    var maxLineWidth = 0;
+    var lineWidths = [];
+    var line = 0;
+    var scale = this.fontSize / data.size;
+    for(var i = 0; i < this.text.length; i++)
+    {
+        var charCode = this.text.charCodeAt(i);
+        if(charCode == "\n".charCodeAt(0))
+        {
+            lineWidths.push(pos.x);
+            maxLineWidth = Math.max(maxLineWidth, pos.x);
+            line++;
+
+            pos.x = 0;
+            pos.y += data.lineHeight;
+            prevCharCode = null;
+            continue;
+        }
+        
+        var charData = data.chars[charCode];
+        if(!charData) continue;
+
+        if(prevCharCode && charData[prevCharCode])
+        {
+           pos.x += charData.kerning[prevCharCode];
+        }
+        chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)});
+        pos.x += charData.xAdvance;
+
+        prevCharCode = charCode;
+    }
+
+    lineWidths.push(pos.x);
+    maxLineWidth = Math.max(maxLineWidth, pos.x);
+
+    var lineAlignOffsets = [];
+    for(i = 0; i <= line; i++)
+    {
+        var alignOffset = 0;
+        if(this.style.align == "right")
+        {
+            alignOffset = maxLineWidth - lineWidths[i];
+        }
+        else if(this.style.align == "center")
+        {
+            alignOffset = (maxLineWidth - lineWidths[i]) / 2;
+        }
+        lineAlignOffsets.push(alignOffset);
+    }
+
+    for(i = 0; i < chars.length; i++)
+    {
+        var char = PIXI.Sprite.fromFrame(chars[i].charCode);
+        char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale;
+        char.position.y = chars[i].position.y * scale;
+        char.scale.x = char.scale.y = scale;
+        this.addChild(char);
+    }
+
+    this.width = pos.x * scale;
+    this.height = (pos.y + data.lineHeight) * scale;
+};
+
+/**
+ * @private
+ */
+PIXI.BitmapText.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+        while(this.children.length > 0)
+        {
+            this.removeChild(this.getChildAt(0));
+        }
+        this.updateText();
+
+        this.dirty = false;
+	}
+	
+	PIXI.DisplayObjectContainer.prototype.updateTransform.call(this);
+};
+
+PIXI.BitmapText.fonts = {};
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_text_Text.js.html b/docs/files/src_pixi_text_Text.js.html new file mode 100644 index 0000000..7933074 --- /dev/null +++ b/docs/files/src_pixi_text_Text.js.html @@ -0,0 +1,344 @@ + + + + + src/pixi/text/Text.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/Text.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text to split a line you can use "\n"
+ * @class Text
+ * @extends Sprite
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text = function(text, style)
+{
+    this.canvas = document.createElement("canvas");
+    this.context = this.canvas.getContext("2d");
+    PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas));
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false;
+};
+
+// constructor
+PIXI.Text.constructor = PIXI.Text;
+PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype);
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font="bold 20pt Arial"] The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.font = style.font || "bold 20pt Arial";
+    style.fill = style.fill || "black";
+    style.align = style.align || "left";
+    style.strokeThickness = style.strokeThickness || 0;
+    this.style = style;
+    this.dirty = true;
+};
+
+/**
+ * Set the copy for the text object. To split a line you can use "\n"
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.Sprite.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.Text.prototype.updateText = function()
+{
+	this.context.font = this.style.font;
+
+	//split text into lines
+	var lines = this.text.split("\n");
+
+	//calculate text width
+	var lineWidths = [];
+	var maxLineWidth = 0;
+	for (var i = 0; i < lines.length; i++)
+	{
+		var lineWidth = this.context.measureText(lines[i]).width;
+		lineWidths[i] = lineWidth;
+		maxLineWidth = Math.max(maxLineWidth, lineWidth);
+	}
+	this.canvas.width = maxLineWidth + this.style.strokeThickness;
+	
+	//calculate text height
+	var lineHeight = this.determineFontHeight("font: " + this.style.font  + ";") + this.style.strokeThickness;
+	this.canvas.height = lineHeight * lines.length;
+
+	//set canvas text styles
+	this.context.fillStyle = this.style.fill;
+	this.context.font = this.style.font;
+	
+	this.context.strokeStyle = this.style.stroke;
+	this.context.lineWidth = this.style.strokeThickness;
+
+	this.context.textBaseline = "top";
+
+	//draw lines line by line
+	for (i = 0; i < lines.length; i++)
+	{
+		var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight);
+	
+		if(this.style.align == "right")
+		{
+			linePosition.x += maxLineWidth - lineWidths[i];
+		}
+		else if(this.style.align == "center")
+		{
+			linePosition.x += (maxLineWidth - lineWidths[i]) / 2;
+		}
+
+		if(this.style.stroke && this.style.strokeThickness)
+		{
+			this.context.strokeText(lines[i], linePosition.x, linePosition.y);
+		}
+
+		if(this.style.fill)
+		{
+			this.context.fillText(lines[i], linePosition.x, linePosition.y);
+		}
+	}
+	
+    this.updateTexture();
+};
+
+/**
+ * Updates texture size based on canvas size
+ * @private
+ */
+PIXI.Text.prototype.updateTexture = function()
+{
+
+    this.texture.baseTexture.width = this.canvas.width;
+    this.texture.baseTexture.height = this.canvas.height;
+    this.texture.frame.width = this.canvas.width;
+    this.texture.frame.height = this.canvas.height;
+    PIXI.texturesToUpdate.push(this.texture.baseTexture);
+};
+
+/**
+ * @private
+ */
+PIXI.Text.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+		this.updateText();	
+		this.dirty = false;
+	}
+	
+	PIXI.Sprite.prototype.updateTransform.call(this);
+};
+
+/*
+ * http://stackoverflow.com/users/34441/ellisbben
+ * great solution to the problem!
+ */
+PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
+{
+	// build a little reference dictionary so if the font style has been used return a
+	// cached version...
+	var result = PIXI.Text.heightCache[fontStyle];
+	
+	if(!result)
+	{
+		var body = document.getElementsByTagName("body")[0];
+		var dummy = document.createElement("div");
+		var dummyText = document.createTextNode("M");
+		dummy.appendChild(dummyText);
+		dummy.setAttribute("style", fontStyle);
+		body.appendChild(dummy);
+		
+		result = dummy.offsetHeight;
+		PIXI.Text.heightCache[fontStyle] = result;
+		
+		body.removeChild(dummy);
+	}
+	
+	return result;
+};
+
+PIXI.Text.prototype.destroy = function(destroyTexture)
+{
+	if(destroyTexture)
+	{
+		this.texture.destroy();
+	}
+		
+};
+
+PIXI.Text.heightCache = {};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_textures_BaseTexture.js.html b/docs/files/src_pixi_textures_BaseTexture.js.html index a7d8f96..31917f0 100644 --- a/docs/files/src_pixi_textures_BaseTexture.js.html +++ b/docs/files/src_pixi_textures_BaseTexture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_textures_Texture.js.html b/docs/files/src_pixi_textures_Texture.js.html index 35f12dc..ca52cac 100644 --- a/docs/files/src_pixi_textures_Texture.js.html +++ b/docs/files/src_pixi_textures_Texture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_Detector.js.html b/docs/files/src_pixi_utils_Detector.js.html index 6b7d031..62cc770 100644 --- a/docs/files/src_pixi_utils_Detector.js.html +++ b/docs/files/src_pixi_utils_Detector.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_EventTarget.js.html b/docs/files/src_pixi_utils_EventTarget.js.html index 929e6eb..7a794c3 100644 --- a/docs/files/src_pixi_utils_EventTarget.js.html +++ b/docs/files/src_pixi_utils_EventTarget.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_Utils.js.html b/docs/files/src_pixi_utils_Utils.js.html index c6b3b43..e46f12a 100644 --- a/docs/files/src_pixi_utils_Utils.js.html +++ b/docs/files/src_pixi_utils_Utils.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/index.html b/docs/index.html index 36c00da..f277aae 100644 --- a/docs/index.html +++ b/docs/index.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/modules/PIXI.html b/docs/modules/PIXI.html index 3cf7051..d3a42e3 100644 --- a/docs/modules/PIXI.html +++ b/docs/modules/PIXI.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -126,7 +132,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/Stage.js:5
    @@ -161,6 +167,18 @@
  • + + BitmapFontLoader + +
    • + +
  • + + BitmapText + +
    • + +
  • CanvasRenderer @@ -179,6 +197,12 @@
  • + + ImageLoader + +
    • + +
  • InteractionData diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 10 - Text/pixi.js b/examples/example 10 - Text/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 10 - Text/pixi.js +++ b/examples/example 10 - Text/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 2 - SpriteSheet/pixi.js b/examples/example 2 - SpriteSheet/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 2 - SpriteSheet/pixi.js +++ b/examples/example 2 - SpriteSheet/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 3 - MovieClip/pixi.js b/examples/example 3 - MovieClip/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 3 - MovieClip/pixi.js +++ b/examples/example 3 - MovieClip/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 4 - Balls/pixi.js b/examples/example 4 - Balls/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 4 - Balls/pixi.js +++ b/examples/example 4 - Balls/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 5 - Morph/pixi.js b/examples/example 5 - Morph/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 5 - Morph/pixi.js +++ b/examples/example 5 - Morph/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 6 - Interactivity/pixi.js b/examples/example 6 - Interactivity/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 6 - Interactivity/pixi.js +++ b/examples/example 6 - Interactivity/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 7 - Transparent Background/pixi.js b/examples/example 7 - Transparent Background/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 7 - Transparent Background/pixi.js +++ b/examples/example 7 - Transparent Background/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 8 - Dragging/pixi.js b/examples/example 8 - Dragging/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 8 - Dragging/pixi.js +++ b/examples/example 8 - Dragging/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Text.js.html b/docs/files/src_pixi_Text.js.html deleted file mode 100644 index 33b7cf2..0000000 --- a/docs/files/src_pixi_Text.js.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - src/pixi/Text.js - Pixi.JS - - - - - - - - -
    -
    -
    - -

    - -
    -
    - API Docs for: 1.0.0 -
    -
    -
    - -
    - -
    -
    -
    - Show: - - - - - - - -
    - - -
    -
    -
    -

    File: src/pixi/Text.js

    - -
    - 
    -/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * A Text Object will create a line of text
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.canvas = document.createElement("canvas");
-	
-	this.context = this.canvas.getContext("2d");
-	//document.body.appendChild(this.canvas);
-	this.setText(text);
-	this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
-	
-	this.updateText();
-	
-	PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
-	
-	// need to store a canvas that can
-}
-
-// constructor
-PIXI.Text.constructor = PIXI.Text;
-PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
-
-/**
- * Set the copy for the text object
- * @methos setText
- * @param text {String} The copy that you would like the text to display
- */
-PIXI.Text.prototype.setText = function(text)
-{
-	this.text = text || " ";
-	this.dirty = true;
-}
-
-/**
- * Set the style of the text
- * @method setStyle
- * @constructor
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.fontStyle = fontStyle || "bold 20pt Arial";
-	this.fillStyle = fillStyle;
-	this.strokeStyle = strokeStyle;
-	this.strokeThickness = strokeThickness || 0;
-	
-	this.dirty = true;
-}
-
-/**
- * @private
- */
-PIXI.Text.prototype.updateText = function()
-{
-//	console.log(this.text);
-	this.context.font = this.fontStyle;
-		
-	this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
-	this.canvas.height = this.determineFontHeight("font: " + this.fontStyle  + ";")+ this.strokeThickness;// textDimensions.height;
-
-	this.context.fillStyle = this.fillStyle;
-	this.context.font = this.fontStyle;
-	
-    this.context.strokeStyle = this.strokeStyle;
-	this.context.lineWidth = this.strokeThickness;
-
-	this.context.textBaseline="top"; 
-
-    if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	
-	
-//	console.log("//")
-}
-
-PIXI.Text.prototype.updateTransform = function()
-{
-	if(this.dirty)
-	{
-		this.updateText();	
-		
-		// update the texture..
-		this.texture.baseTexture.width = this.canvas.width;
-		this.texture.baseTexture.height = this.canvas.height;
-		this.texture.frame.width = this.canvas.width;
-		this.texture.frame.height = this.canvas.height;
-		
-		PIXI.texturesToUpdate.push(this.texture.baseTexture);
-		this.dirty = false;
-	}
-	
-	PIXI.Sprite.prototype.updateTransform.call( this );
-}
-
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
-{
-	// build a little refference dictionary so if the font style has been used return a
-	// cached version...
-	var result = PIXI.Text.heightCache[fontStyle]
-	
-	if(!result)
-	{
-		var body = document.getElementsByTagName("body")[0];
-		var dummy = document.createElement("div");
-		var dummyText = document.createTextNode("M");
-		dummy.appendChild(dummyText);
-		dummy.setAttribute("style", fontStyle);
-		body.appendChild(dummy);
-		
-		result = dummy.offsetHeight;
-		PIXI.Text.heightCache[fontStyle] = result
-		
-		body.removeChild(dummy);
-	}
-	
-	return result;
-};
-
-PIXI.Text.prototype.destroy = function(destroyTexture)
-{
-	if(destroyTexture)
-	{
-		this.texture.destroy();
-	}
-		
-}
-
-PIXI.Text.heightCache = {};
-
-
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - diff --git a/docs/files/src_pixi_extras_Rope.js.html b/docs/files/src_pixi_extras_Rope.js.html index 7e2ceff..219f049 100644 --- a/docs/files/src_pixi_extras_Rope.js.html +++ b/docs/files/src_pixi_extras_Rope.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_Strip.js.html b/docs/files/src_pixi_extras_Strip.js.html index 8f748c2..a7a64cd 100644 --- a/docs/files/src_pixi_extras_Strip.js.html +++ b/docs/files/src_pixi_extras_Strip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_TilingSprite.js.html b/docs/files/src_pixi_extras_TilingSprite.js.html index af3d84d..b61c15f 100644 --- a/docs/files/src_pixi_extras_TilingSprite.js.html +++ b/docs/files/src_pixi_extras_TilingSprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_loaders_AssetLoader.js.html b/docs/files/src_pixi_loaders_AssetLoader.js.html index 089d5cf..594481e 100644 --- a/docs/files/src_pixi_loaders_AssetLoader.js.html +++ b/docs/files/src_pixi_loaders_AssetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -127,17 +133,17 @@ */ /** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -145,11 +151,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -169,105 +183,45 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; diff --git a/docs/files/src_pixi_loaders_BitmapFontLoader.js.html b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html new file mode 100644 index 0000000..6fd5d80 --- /dev/null +++ b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html @@ -0,0 +1,275 @@ + + + + + src/pixi/loaders/BitmapFontLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/BitmapFontLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The xml loader is used to load in XML bitmap font data ("xml" or "fnt")
+ * To generate the data you can use http://www.angelcode.com/products/bmfont/
+ * This loader will also load the image file as the data.
+ * When loaded this class will dispatch a "loaded" event
+ * @class BitmapFontLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url the url of the sprite sheet JSON file
+ * @param {Boolean} crossorigin
+ */
+
+PIXI.BitmapFontLoader = function(url, crossorigin)
+{
+    /*
+     * i use texture packer to load the assets..
+     * http://www.codeandweb.com/texturepacker
+     * make sure to set the format as "JSON"
+     */
+    PIXI.EventTarget.call(this);
+    this.url = url;
+    this.baseUrl = url.replace(/[^\/]*$/, "");
+    this.texture = null;
+    this.crossorigin = crossorigin;
+};
+
+// constructor
+PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader;
+
+/**
+ * This will begin loading the JSON file
+ */
+PIXI.BitmapFontLoader.prototype.load = function()
+{
+    this.ajaxRequest = new XMLHttpRequest();
+    var scope = this;
+    this.ajaxRequest.onreadystatechange = function()
+    {
+        scope.onXMLLoaded();
+    };
+
+    this.ajaxRequest.open("GET", this.url, true);
+    if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml");
+    this.ajaxRequest.send(null)
+};
+
+/**
+ * Invoked when XML file is loaded
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
+{
+    if (this.ajaxRequest.readyState == 4)
+    {
+        if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1)
+        {
+            var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue;
+            var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
+            this.texture = image.texture.baseTexture;
+
+            var data = {};
+            var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0];
+            var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0];
+            data.font = info.attributes.getNamedItem("face").nodeValue;
+            data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10);
+            data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10);
+            data.chars = {};
+
+            //parse letters
+            var letters = this.ajaxRequest.responseXML.getElementsByTagName("char");
+
+            for (var i = 0; i < letters.length; i++)
+            {
+                var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10);
+
+                var textureRect = {
+                    x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10),
+                    y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10),
+                    width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10),
+                    height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10)
+                };
+                PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect);
+
+                data.chars[charCode] = {
+                    xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10),
+                    yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10),
+                    xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10),
+                    kerning: {}
+                };
+            }
+
+            //parse kernings
+            var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning");
+            for (i = 0; i < kernings.length; i++)
+            {
+               var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10);
+               var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10);
+               var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10);
+
+                data.chars[second].kerning[first] = amount;
+
+            }
+            PIXI.BitmapText.fonts[data.font] = data;
+
+            var scope = this;
+            image.addEventListener("loaded", function() {
+                scope.onLoaded();
+            });
+            image.load();
+        }
+    }
+};
+
+/**
+ * Invoked when all files are loaded (xml/fnt and texture)
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_ImageLoader.js.html b/docs/files/src_pixi_loaders_ImageLoader.js.html new file mode 100644 index 0000000..f6fcf07 --- /dev/null +++ b/docs/files/src_pixi_loaders_ImageLoader.js.html @@ -0,0 +1,200 @@ + + + + + src/pixi/loaders/ImageLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/ImageLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif")
+ * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
+ * When loaded this class will dispatch a 'loaded' event
+ * @class ImageLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url The url of the image
+ * @param {Boolean} crossorigin
+ */
+PIXI.ImageLoader = function(url, crossorigin)
+{
+    PIXI.EventTarget.call(this);
+    this.texture = PIXI.Texture.fromImage(url, crossorigin);
+};
+
+// constructor
+PIXI.ImageLoader.constructor = PIXI.ImageLoader;
+
+/**
+ * Loads image or takes it from cache
+ */
+PIXI.ImageLoader.prototype.load = function()
+{
+    if(!this.texture.baseTexture.hasLoaded)
+    {
+        var scope = this;
+        this.texture.baseTexture.addEventListener("loaded", function()
+        {
+            scope.onLoaded();
+        });
+    }
+    else
+    {
+        this.onLoaded();
+    }
+};
+
+/**
+ * Invoked when image file is loaded or it is already cached and ready to use
+ * @private
+ */
+PIXI.ImageLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 5510866..3b14d2f 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,30 +136,31 @@ * The sprite sheet loader is used to load in JSON sprite sheet data * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event + * When loaded this class will dispatch a "loaded" event * @class SpriteSheetLoader * @extends EventTarget * @constructor - * @param url {String} the url of the sprite sheet JSON file + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin */ -PIXI.SpriteSheetLoader = function(url) +PIXI.SpriteSheetLoader = function(url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker * make sure to set the format as "JSON" */ - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; this.frames = {}; - this.crossorigin = false; -} + this.crossorigin = crossorigin; +}; // constructor PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; @@ -165,32 +172,38 @@ { this.ajaxRequest = new AjaxRequest(); var scope = this; - this.ajaxRequest.onreadystatechange=function() + this.ajaxRequest.onreadystatechange = function() { - scope.onLoaded(); - } + scope.onJSONLoaded(); + }; - this.ajaxRequest.open("GET", this.url, true) + this.ajaxRequest.open("GET", this.url, true); if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); this.ajaxRequest.send(null) -} +}; -PIXI.SpriteSheetLoader.prototype.onLoaded = function() +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() { - if (this.ajaxRequest.readyState==4) + if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) { var rect = frameData[i].frame; if (rect) @@ -201,32 +214,24 @@ { //var realSize = frameData[i].spriteSourceSize; PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + PIXI.TextureCache[i].trim.x = 0;// (realSize.x / rect.w) // calculate the offset! } - // this.frames[i] = ; } } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; diff --git a/docs/files/src_pixi_renderers_CanvasRenderer.js.html b/docs/files/src_pixi_renderers_CanvasRenderer.js.html index 5598bbd..0b91b46 100644 --- a/docs/files/src_pixi_renderers_CanvasRenderer.js.html +++ b/docs/files/src_pixi_renderers_CanvasRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLBatch.js.html b/docs/files/src_pixi_renderers_WebGLBatch.js.html index 17824ca..95b86b5 100644 --- a/docs/files/src_pixi_renderers_WebGLBatch.js.html +++ b/docs/files/src_pixi_renderers_WebGLBatch.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 0a39149..af0ce9f 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLShaders.js.html b/docs/files/src_pixi_renderers_WebGLShaders.js.html index 40ac3bd..bb52ff9 100644 --- a/docs/files/src_pixi_renderers_WebGLShaders.js.html +++ b/docs/files/src_pixi_renderers_WebGLShaders.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_text_BitmapText.js.html b/docs/files/src_pixi_text_BitmapText.js.html new file mode 100644 index 0000000..9fdae27 --- /dev/null +++ b/docs/files/src_pixi_text_BitmapText.js.html @@ -0,0 +1,306 @@ + + + + + src/pixi/text/BitmapText.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/BitmapText.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text using bitmap font 
+ * You can generate the fnt files using 
+ * http://www.angelcode.com/products/bmfont/ for windows of
+ * http://www.bmglyph.com/ for mac.
+ * @class BitmapText
+ * @extends DisplayObjectContainer
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously)
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+ //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font
+PIXI.BitmapText = function(text, style)
+{
+    PIXI.DisplayObjectContainer.call(this);
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false
+
+};
+
+// constructor
+PIXI.BitmapText.constructor = PIXI.BitmapText;
+PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);
+
+/**
+ * Set the copy for the text object
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.BitmapText.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+PIXI.BitmapText.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.align = style.align || "left";
+    this.style = style;
+
+    var font = style.font.split(" ");
+    this.fontName = font[font.length - 1];
+    this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size;
+
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.BitmapText.prototype.updateText = function()
+{
+    var data = PIXI.BitmapText.fonts[this.fontName];
+    var pos = new PIXI.Point();
+    var prevCharCode = null;
+    var chars = [];
+    var maxLineWidth = 0;
+    var lineWidths = [];
+    var line = 0;
+    var scale = this.fontSize / data.size;
+    for(var i = 0; i < this.text.length; i++)
+    {
+        var charCode = this.text.charCodeAt(i);
+        if(charCode == "\n".charCodeAt(0))
+        {
+            lineWidths.push(pos.x);
+            maxLineWidth = Math.max(maxLineWidth, pos.x);
+            line++;
+
+            pos.x = 0;
+            pos.y += data.lineHeight;
+            prevCharCode = null;
+            continue;
+        }
+        
+        var charData = data.chars[charCode];
+        if(!charData) continue;
+
+        if(prevCharCode && charData[prevCharCode])
+        {
+           pos.x += charData.kerning[prevCharCode];
+        }
+        chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)});
+        pos.x += charData.xAdvance;
+
+        prevCharCode = charCode;
+    }
+
+    lineWidths.push(pos.x);
+    maxLineWidth = Math.max(maxLineWidth, pos.x);
+
+    var lineAlignOffsets = [];
+    for(i = 0; i <= line; i++)
+    {
+        var alignOffset = 0;
+        if(this.style.align == "right")
+        {
+            alignOffset = maxLineWidth - lineWidths[i];
+        }
+        else if(this.style.align == "center")
+        {
+            alignOffset = (maxLineWidth - lineWidths[i]) / 2;
+        }
+        lineAlignOffsets.push(alignOffset);
+    }
+
+    for(i = 0; i < chars.length; i++)
+    {
+        var char = PIXI.Sprite.fromFrame(chars[i].charCode);
+        char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale;
+        char.position.y = chars[i].position.y * scale;
+        char.scale.x = char.scale.y = scale;
+        this.addChild(char);
+    }
+
+    this.width = pos.x * scale;
+    this.height = (pos.y + data.lineHeight) * scale;
+};
+
+/**
+ * @private
+ */
+PIXI.BitmapText.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+        while(this.children.length > 0)
+        {
+            this.removeChild(this.getChildAt(0));
+        }
+        this.updateText();
+
+        this.dirty = false;
+	}
+	
+	PIXI.DisplayObjectContainer.prototype.updateTransform.call(this);
+};
+
+PIXI.BitmapText.fonts = {};
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_text_Text.js.html b/docs/files/src_pixi_text_Text.js.html new file mode 100644 index 0000000..7933074 --- /dev/null +++ b/docs/files/src_pixi_text_Text.js.html @@ -0,0 +1,344 @@ + + + + + src/pixi/text/Text.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/Text.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text to split a line you can use "\n"
+ * @class Text
+ * @extends Sprite
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text = function(text, style)
+{
+    this.canvas = document.createElement("canvas");
+    this.context = this.canvas.getContext("2d");
+    PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas));
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false;
+};
+
+// constructor
+PIXI.Text.constructor = PIXI.Text;
+PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype);
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font="bold 20pt Arial"] The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.font = style.font || "bold 20pt Arial";
+    style.fill = style.fill || "black";
+    style.align = style.align || "left";
+    style.strokeThickness = style.strokeThickness || 0;
+    this.style = style;
+    this.dirty = true;
+};
+
+/**
+ * Set the copy for the text object. To split a line you can use "\n"
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.Sprite.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.Text.prototype.updateText = function()
+{
+	this.context.font = this.style.font;
+
+	//split text into lines
+	var lines = this.text.split("\n");
+
+	//calculate text width
+	var lineWidths = [];
+	var maxLineWidth = 0;
+	for (var i = 0; i < lines.length; i++)
+	{
+		var lineWidth = this.context.measureText(lines[i]).width;
+		lineWidths[i] = lineWidth;
+		maxLineWidth = Math.max(maxLineWidth, lineWidth);
+	}
+	this.canvas.width = maxLineWidth + this.style.strokeThickness;
+	
+	//calculate text height
+	var lineHeight = this.determineFontHeight("font: " + this.style.font  + ";") + this.style.strokeThickness;
+	this.canvas.height = lineHeight * lines.length;
+
+	//set canvas text styles
+	this.context.fillStyle = this.style.fill;
+	this.context.font = this.style.font;
+	
+	this.context.strokeStyle = this.style.stroke;
+	this.context.lineWidth = this.style.strokeThickness;
+
+	this.context.textBaseline = "top";
+
+	//draw lines line by line
+	for (i = 0; i < lines.length; i++)
+	{
+		var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight);
+	
+		if(this.style.align == "right")
+		{
+			linePosition.x += maxLineWidth - lineWidths[i];
+		}
+		else if(this.style.align == "center")
+		{
+			linePosition.x += (maxLineWidth - lineWidths[i]) / 2;
+		}
+
+		if(this.style.stroke && this.style.strokeThickness)
+		{
+			this.context.strokeText(lines[i], linePosition.x, linePosition.y);
+		}
+
+		if(this.style.fill)
+		{
+			this.context.fillText(lines[i], linePosition.x, linePosition.y);
+		}
+	}
+	
+    this.updateTexture();
+};
+
+/**
+ * Updates texture size based on canvas size
+ * @private
+ */
+PIXI.Text.prototype.updateTexture = function()
+{
+
+    this.texture.baseTexture.width = this.canvas.width;
+    this.texture.baseTexture.height = this.canvas.height;
+    this.texture.frame.width = this.canvas.width;
+    this.texture.frame.height = this.canvas.height;
+    PIXI.texturesToUpdate.push(this.texture.baseTexture);
+};
+
+/**
+ * @private
+ */
+PIXI.Text.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+		this.updateText();	
+		this.dirty = false;
+	}
+	
+	PIXI.Sprite.prototype.updateTransform.call(this);
+};
+
+/*
+ * http://stackoverflow.com/users/34441/ellisbben
+ * great solution to the problem!
+ */
+PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
+{
+	// build a little reference dictionary so if the font style has been used return a
+	// cached version...
+	var result = PIXI.Text.heightCache[fontStyle];
+	
+	if(!result)
+	{
+		var body = document.getElementsByTagName("body")[0];
+		var dummy = document.createElement("div");
+		var dummyText = document.createTextNode("M");
+		dummy.appendChild(dummyText);
+		dummy.setAttribute("style", fontStyle);
+		body.appendChild(dummy);
+		
+		result = dummy.offsetHeight;
+		PIXI.Text.heightCache[fontStyle] = result;
+		
+		body.removeChild(dummy);
+	}
+	
+	return result;
+};
+
+PIXI.Text.prototype.destroy = function(destroyTexture)
+{
+	if(destroyTexture)
+	{
+		this.texture.destroy();
+	}
+		
+};
+
+PIXI.Text.heightCache = {};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_textures_BaseTexture.js.html b/docs/files/src_pixi_textures_BaseTexture.js.html index a7d8f96..31917f0 100644 --- a/docs/files/src_pixi_textures_BaseTexture.js.html +++ b/docs/files/src_pixi_textures_BaseTexture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_textures_Texture.js.html b/docs/files/src_pixi_textures_Texture.js.html index 35f12dc..ca52cac 100644 --- a/docs/files/src_pixi_textures_Texture.js.html +++ b/docs/files/src_pixi_textures_Texture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_Detector.js.html b/docs/files/src_pixi_utils_Detector.js.html index 6b7d031..62cc770 100644 --- a/docs/files/src_pixi_utils_Detector.js.html +++ b/docs/files/src_pixi_utils_Detector.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_EventTarget.js.html b/docs/files/src_pixi_utils_EventTarget.js.html index 929e6eb..7a794c3 100644 --- a/docs/files/src_pixi_utils_EventTarget.js.html +++ b/docs/files/src_pixi_utils_EventTarget.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_Utils.js.html b/docs/files/src_pixi_utils_Utils.js.html index c6b3b43..e46f12a 100644 --- a/docs/files/src_pixi_utils_Utils.js.html +++ b/docs/files/src_pixi_utils_Utils.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/index.html b/docs/index.html index 36c00da..f277aae 100644 --- a/docs/index.html +++ b/docs/index.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/modules/PIXI.html b/docs/modules/PIXI.html index 3cf7051..d3a42e3 100644 --- a/docs/modules/PIXI.html +++ b/docs/modules/PIXI.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -126,7 +132,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/Stage.js:5
    @@ -161,6 +167,18 @@
  • + + BitmapFontLoader + +
    • + +
  • + + BitmapText + +
    • + +
  • CanvasRenderer @@ -179,6 +197,12 @@
  • + + ImageLoader + +
    • + +
  • InteractionData diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 10 - Text/pixi.js b/examples/example 10 - Text/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 10 - Text/pixi.js +++ b/examples/example 10 - Text/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 2 - SpriteSheet/pixi.js b/examples/example 2 - SpriteSheet/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 2 - SpriteSheet/pixi.js +++ b/examples/example 2 - SpriteSheet/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 3 - MovieClip/pixi.js b/examples/example 3 - MovieClip/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 3 - MovieClip/pixi.js +++ b/examples/example 3 - MovieClip/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 4 - Balls/pixi.js b/examples/example 4 - Balls/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 4 - Balls/pixi.js +++ b/examples/example 4 - Balls/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 5 - Morph/pixi.js b/examples/example 5 - Morph/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 5 - Morph/pixi.js +++ b/examples/example 5 - Morph/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 6 - Interactivity/pixi.js b/examples/example 6 - Interactivity/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 6 - Interactivity/pixi.js +++ b/examples/example 6 - Interactivity/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 7 - Transparent Background/pixi.js b/examples/example 7 - Transparent Background/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 7 - Transparent Background/pixi.js +++ b/examples/example 7 - Transparent Background/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 8 - Dragging/pixi.js b/examples/example 8 - Dragging/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 8 - Dragging/pixi.js +++ b/examples/example 8 - Dragging/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 9 - Tiling Texture/pixi.js b/examples/example 9 - Tiling Texture/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 9 - Tiling Texture/pixi.js +++ b/examples/example 9 - Tiling Texture/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Text.js.html b/docs/files/src_pixi_Text.js.html deleted file mode 100644 index 33b7cf2..0000000 --- a/docs/files/src_pixi_Text.js.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - src/pixi/Text.js - Pixi.JS - - - - - - - - -
    -
    -
    - -

    - -
    -
    - API Docs for: 1.0.0 -
    -
    -
    - -
    - -
    -
    -
    - Show: - - - - - - - -
    - - -
    -
    -
    -

    File: src/pixi/Text.js

    - -
    - 
    -/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * A Text Object will create a line of text
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.canvas = document.createElement("canvas");
-	
-	this.context = this.canvas.getContext("2d");
-	//document.body.appendChild(this.canvas);
-	this.setText(text);
-	this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
-	
-	this.updateText();
-	
-	PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
-	
-	// need to store a canvas that can
-}
-
-// constructor
-PIXI.Text.constructor = PIXI.Text;
-PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
-
-/**
- * Set the copy for the text object
- * @methos setText
- * @param text {String} The copy that you would like the text to display
- */
-PIXI.Text.prototype.setText = function(text)
-{
-	this.text = text || " ";
-	this.dirty = true;
-}
-
-/**
- * Set the style of the text
- * @method setStyle
- * @constructor
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.fontStyle = fontStyle || "bold 20pt Arial";
-	this.fillStyle = fillStyle;
-	this.strokeStyle = strokeStyle;
-	this.strokeThickness = strokeThickness || 0;
-	
-	this.dirty = true;
-}
-
-/**
- * @private
- */
-PIXI.Text.prototype.updateText = function()
-{
-//	console.log(this.text);
-	this.context.font = this.fontStyle;
-		
-	this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
-	this.canvas.height = this.determineFontHeight("font: " + this.fontStyle  + ";")+ this.strokeThickness;// textDimensions.height;
-
-	this.context.fillStyle = this.fillStyle;
-	this.context.font = this.fontStyle;
-	
-    this.context.strokeStyle = this.strokeStyle;
-	this.context.lineWidth = this.strokeThickness;
-
-	this.context.textBaseline="top"; 
-
-    if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	
-	
-//	console.log("//")
-}
-
-PIXI.Text.prototype.updateTransform = function()
-{
-	if(this.dirty)
-	{
-		this.updateText();	
-		
-		// update the texture..
-		this.texture.baseTexture.width = this.canvas.width;
-		this.texture.baseTexture.height = this.canvas.height;
-		this.texture.frame.width = this.canvas.width;
-		this.texture.frame.height = this.canvas.height;
-		
-		PIXI.texturesToUpdate.push(this.texture.baseTexture);
-		this.dirty = false;
-	}
-	
-	PIXI.Sprite.prototype.updateTransform.call( this );
-}
-
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
-{
-	// build a little refference dictionary so if the font style has been used return a
-	// cached version...
-	var result = PIXI.Text.heightCache[fontStyle]
-	
-	if(!result)
-	{
-		var body = document.getElementsByTagName("body")[0];
-		var dummy = document.createElement("div");
-		var dummyText = document.createTextNode("M");
-		dummy.appendChild(dummyText);
-		dummy.setAttribute("style", fontStyle);
-		body.appendChild(dummy);
-		
-		result = dummy.offsetHeight;
-		PIXI.Text.heightCache[fontStyle] = result
-		
-		body.removeChild(dummy);
-	}
-	
-	return result;
-};
-
-PIXI.Text.prototype.destroy = function(destroyTexture)
-{
-	if(destroyTexture)
-	{
-		this.texture.destroy();
-	}
-		
-}
-
-PIXI.Text.heightCache = {};
-
-
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - diff --git a/docs/files/src_pixi_extras_Rope.js.html b/docs/files/src_pixi_extras_Rope.js.html index 7e2ceff..219f049 100644 --- a/docs/files/src_pixi_extras_Rope.js.html +++ b/docs/files/src_pixi_extras_Rope.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_Strip.js.html b/docs/files/src_pixi_extras_Strip.js.html index 8f748c2..a7a64cd 100644 --- a/docs/files/src_pixi_extras_Strip.js.html +++ b/docs/files/src_pixi_extras_Strip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_TilingSprite.js.html b/docs/files/src_pixi_extras_TilingSprite.js.html index af3d84d..b61c15f 100644 --- a/docs/files/src_pixi_extras_TilingSprite.js.html +++ b/docs/files/src_pixi_extras_TilingSprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_loaders_AssetLoader.js.html b/docs/files/src_pixi_loaders_AssetLoader.js.html index 089d5cf..594481e 100644 --- a/docs/files/src_pixi_loaders_AssetLoader.js.html +++ b/docs/files/src_pixi_loaders_AssetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -127,17 +133,17 @@ */ /** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -145,11 +151,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -169,105 +183,45 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; diff --git a/docs/files/src_pixi_loaders_BitmapFontLoader.js.html b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html new file mode 100644 index 0000000..6fd5d80 --- /dev/null +++ b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html @@ -0,0 +1,275 @@ + + + + + src/pixi/loaders/BitmapFontLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/BitmapFontLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The xml loader is used to load in XML bitmap font data ("xml" or "fnt")
+ * To generate the data you can use http://www.angelcode.com/products/bmfont/
+ * This loader will also load the image file as the data.
+ * When loaded this class will dispatch a "loaded" event
+ * @class BitmapFontLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url the url of the sprite sheet JSON file
+ * @param {Boolean} crossorigin
+ */
+
+PIXI.BitmapFontLoader = function(url, crossorigin)
+{
+    /*
+     * i use texture packer to load the assets..
+     * http://www.codeandweb.com/texturepacker
+     * make sure to set the format as "JSON"
+     */
+    PIXI.EventTarget.call(this);
+    this.url = url;
+    this.baseUrl = url.replace(/[^\/]*$/, "");
+    this.texture = null;
+    this.crossorigin = crossorigin;
+};
+
+// constructor
+PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader;
+
+/**
+ * This will begin loading the JSON file
+ */
+PIXI.BitmapFontLoader.prototype.load = function()
+{
+    this.ajaxRequest = new XMLHttpRequest();
+    var scope = this;
+    this.ajaxRequest.onreadystatechange = function()
+    {
+        scope.onXMLLoaded();
+    };
+
+    this.ajaxRequest.open("GET", this.url, true);
+    if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml");
+    this.ajaxRequest.send(null)
+};
+
+/**
+ * Invoked when XML file is loaded
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
+{
+    if (this.ajaxRequest.readyState == 4)
+    {
+        if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1)
+        {
+            var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue;
+            var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
+            this.texture = image.texture.baseTexture;
+
+            var data = {};
+            var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0];
+            var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0];
+            data.font = info.attributes.getNamedItem("face").nodeValue;
+            data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10);
+            data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10);
+            data.chars = {};
+
+            //parse letters
+            var letters = this.ajaxRequest.responseXML.getElementsByTagName("char");
+
+            for (var i = 0; i < letters.length; i++)
+            {
+                var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10);
+
+                var textureRect = {
+                    x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10),
+                    y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10),
+                    width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10),
+                    height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10)
+                };
+                PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect);
+
+                data.chars[charCode] = {
+                    xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10),
+                    yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10),
+                    xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10),
+                    kerning: {}
+                };
+            }
+
+            //parse kernings
+            var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning");
+            for (i = 0; i < kernings.length; i++)
+            {
+               var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10);
+               var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10);
+               var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10);
+
+                data.chars[second].kerning[first] = amount;
+
+            }
+            PIXI.BitmapText.fonts[data.font] = data;
+
+            var scope = this;
+            image.addEventListener("loaded", function() {
+                scope.onLoaded();
+            });
+            image.load();
+        }
+    }
+};
+
+/**
+ * Invoked when all files are loaded (xml/fnt and texture)
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_ImageLoader.js.html b/docs/files/src_pixi_loaders_ImageLoader.js.html new file mode 100644 index 0000000..f6fcf07 --- /dev/null +++ b/docs/files/src_pixi_loaders_ImageLoader.js.html @@ -0,0 +1,200 @@ + + + + + src/pixi/loaders/ImageLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/ImageLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif")
+ * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
+ * When loaded this class will dispatch a 'loaded' event
+ * @class ImageLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url The url of the image
+ * @param {Boolean} crossorigin
+ */
+PIXI.ImageLoader = function(url, crossorigin)
+{
+    PIXI.EventTarget.call(this);
+    this.texture = PIXI.Texture.fromImage(url, crossorigin);
+};
+
+// constructor
+PIXI.ImageLoader.constructor = PIXI.ImageLoader;
+
+/**
+ * Loads image or takes it from cache
+ */
+PIXI.ImageLoader.prototype.load = function()
+{
+    if(!this.texture.baseTexture.hasLoaded)
+    {
+        var scope = this;
+        this.texture.baseTexture.addEventListener("loaded", function()
+        {
+            scope.onLoaded();
+        });
+    }
+    else
+    {
+        this.onLoaded();
+    }
+};
+
+/**
+ * Invoked when image file is loaded or it is already cached and ready to use
+ * @private
+ */
+PIXI.ImageLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 5510866..3b14d2f 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,30 +136,31 @@ * The sprite sheet loader is used to load in JSON sprite sheet data * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event + * When loaded this class will dispatch a "loaded" event * @class SpriteSheetLoader * @extends EventTarget * @constructor - * @param url {String} the url of the sprite sheet JSON file + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin */ -PIXI.SpriteSheetLoader = function(url) +PIXI.SpriteSheetLoader = function(url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker * make sure to set the format as "JSON" */ - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; this.frames = {}; - this.crossorigin = false; -} + this.crossorigin = crossorigin; +}; // constructor PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; @@ -165,32 +172,38 @@ { this.ajaxRequest = new AjaxRequest(); var scope = this; - this.ajaxRequest.onreadystatechange=function() + this.ajaxRequest.onreadystatechange = function() { - scope.onLoaded(); - } + scope.onJSONLoaded(); + }; - this.ajaxRequest.open("GET", this.url, true) + this.ajaxRequest.open("GET", this.url, true); if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); this.ajaxRequest.send(null) -} +}; -PIXI.SpriteSheetLoader.prototype.onLoaded = function() +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() { - if (this.ajaxRequest.readyState==4) + if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) { var rect = frameData[i].frame; if (rect) @@ -201,32 +214,24 @@ { //var realSize = frameData[i].spriteSourceSize; PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + PIXI.TextureCache[i].trim.x = 0;// (realSize.x / rect.w) // calculate the offset! } - // this.frames[i] = ; } } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; diff --git a/docs/files/src_pixi_renderers_CanvasRenderer.js.html b/docs/files/src_pixi_renderers_CanvasRenderer.js.html index 5598bbd..0b91b46 100644 --- a/docs/files/src_pixi_renderers_CanvasRenderer.js.html +++ b/docs/files/src_pixi_renderers_CanvasRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLBatch.js.html b/docs/files/src_pixi_renderers_WebGLBatch.js.html index 17824ca..95b86b5 100644 --- a/docs/files/src_pixi_renderers_WebGLBatch.js.html +++ b/docs/files/src_pixi_renderers_WebGLBatch.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 0a39149..af0ce9f 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLShaders.js.html b/docs/files/src_pixi_renderers_WebGLShaders.js.html index 40ac3bd..bb52ff9 100644 --- a/docs/files/src_pixi_renderers_WebGLShaders.js.html +++ b/docs/files/src_pixi_renderers_WebGLShaders.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_text_BitmapText.js.html b/docs/files/src_pixi_text_BitmapText.js.html new file mode 100644 index 0000000..9fdae27 --- /dev/null +++ b/docs/files/src_pixi_text_BitmapText.js.html @@ -0,0 +1,306 @@ + + + + + src/pixi/text/BitmapText.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/BitmapText.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text using bitmap font 
+ * You can generate the fnt files using 
+ * http://www.angelcode.com/products/bmfont/ for windows of
+ * http://www.bmglyph.com/ for mac.
+ * @class BitmapText
+ * @extends DisplayObjectContainer
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously)
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+ //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font
+PIXI.BitmapText = function(text, style)
+{
+    PIXI.DisplayObjectContainer.call(this);
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false
+
+};
+
+// constructor
+PIXI.BitmapText.constructor = PIXI.BitmapText;
+PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);
+
+/**
+ * Set the copy for the text object
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.BitmapText.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+PIXI.BitmapText.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.align = style.align || "left";
+    this.style = style;
+
+    var font = style.font.split(" ");
+    this.fontName = font[font.length - 1];
+    this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size;
+
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.BitmapText.prototype.updateText = function()
+{
+    var data = PIXI.BitmapText.fonts[this.fontName];
+    var pos = new PIXI.Point();
+    var prevCharCode = null;
+    var chars = [];
+    var maxLineWidth = 0;
+    var lineWidths = [];
+    var line = 0;
+    var scale = this.fontSize / data.size;
+    for(var i = 0; i < this.text.length; i++)
+    {
+        var charCode = this.text.charCodeAt(i);
+        if(charCode == "\n".charCodeAt(0))
+        {
+            lineWidths.push(pos.x);
+            maxLineWidth = Math.max(maxLineWidth, pos.x);
+            line++;
+
+            pos.x = 0;
+            pos.y += data.lineHeight;
+            prevCharCode = null;
+            continue;
+        }
+        
+        var charData = data.chars[charCode];
+        if(!charData) continue;
+
+        if(prevCharCode && charData[prevCharCode])
+        {
+           pos.x += charData.kerning[prevCharCode];
+        }
+        chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)});
+        pos.x += charData.xAdvance;
+
+        prevCharCode = charCode;
+    }
+
+    lineWidths.push(pos.x);
+    maxLineWidth = Math.max(maxLineWidth, pos.x);
+
+    var lineAlignOffsets = [];
+    for(i = 0; i <= line; i++)
+    {
+        var alignOffset = 0;
+        if(this.style.align == "right")
+        {
+            alignOffset = maxLineWidth - lineWidths[i];
+        }
+        else if(this.style.align == "center")
+        {
+            alignOffset = (maxLineWidth - lineWidths[i]) / 2;
+        }
+        lineAlignOffsets.push(alignOffset);
+    }
+
+    for(i = 0; i < chars.length; i++)
+    {
+        var char = PIXI.Sprite.fromFrame(chars[i].charCode);
+        char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale;
+        char.position.y = chars[i].position.y * scale;
+        char.scale.x = char.scale.y = scale;
+        this.addChild(char);
+    }
+
+    this.width = pos.x * scale;
+    this.height = (pos.y + data.lineHeight) * scale;
+};
+
+/**
+ * @private
+ */
+PIXI.BitmapText.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+        while(this.children.length > 0)
+        {
+            this.removeChild(this.getChildAt(0));
+        }
+        this.updateText();
+
+        this.dirty = false;
+	}
+	
+	PIXI.DisplayObjectContainer.prototype.updateTransform.call(this);
+};
+
+PIXI.BitmapText.fonts = {};
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_text_Text.js.html b/docs/files/src_pixi_text_Text.js.html new file mode 100644 index 0000000..7933074 --- /dev/null +++ b/docs/files/src_pixi_text_Text.js.html @@ -0,0 +1,344 @@ + + + + + src/pixi/text/Text.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/Text.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text to split a line you can use "\n"
+ * @class Text
+ * @extends Sprite
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text = function(text, style)
+{
+    this.canvas = document.createElement("canvas");
+    this.context = this.canvas.getContext("2d");
+    PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas));
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false;
+};
+
+// constructor
+PIXI.Text.constructor = PIXI.Text;
+PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype);
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font="bold 20pt Arial"] The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.font = style.font || "bold 20pt Arial";
+    style.fill = style.fill || "black";
+    style.align = style.align || "left";
+    style.strokeThickness = style.strokeThickness || 0;
+    this.style = style;
+    this.dirty = true;
+};
+
+/**
+ * Set the copy for the text object. To split a line you can use "\n"
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.Sprite.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.Text.prototype.updateText = function()
+{
+	this.context.font = this.style.font;
+
+	//split text into lines
+	var lines = this.text.split("\n");
+
+	//calculate text width
+	var lineWidths = [];
+	var maxLineWidth = 0;
+	for (var i = 0; i < lines.length; i++)
+	{
+		var lineWidth = this.context.measureText(lines[i]).width;
+		lineWidths[i] = lineWidth;
+		maxLineWidth = Math.max(maxLineWidth, lineWidth);
+	}
+	this.canvas.width = maxLineWidth + this.style.strokeThickness;
+	
+	//calculate text height
+	var lineHeight = this.determineFontHeight("font: " + this.style.font  + ";") + this.style.strokeThickness;
+	this.canvas.height = lineHeight * lines.length;
+
+	//set canvas text styles
+	this.context.fillStyle = this.style.fill;
+	this.context.font = this.style.font;
+	
+	this.context.strokeStyle = this.style.stroke;
+	this.context.lineWidth = this.style.strokeThickness;
+
+	this.context.textBaseline = "top";
+
+	//draw lines line by line
+	for (i = 0; i < lines.length; i++)
+	{
+		var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight);
+	
+		if(this.style.align == "right")
+		{
+			linePosition.x += maxLineWidth - lineWidths[i];
+		}
+		else if(this.style.align == "center")
+		{
+			linePosition.x += (maxLineWidth - lineWidths[i]) / 2;
+		}
+
+		if(this.style.stroke && this.style.strokeThickness)
+		{
+			this.context.strokeText(lines[i], linePosition.x, linePosition.y);
+		}
+
+		if(this.style.fill)
+		{
+			this.context.fillText(lines[i], linePosition.x, linePosition.y);
+		}
+	}
+	
+    this.updateTexture();
+};
+
+/**
+ * Updates texture size based on canvas size
+ * @private
+ */
+PIXI.Text.prototype.updateTexture = function()
+{
+
+    this.texture.baseTexture.width = this.canvas.width;
+    this.texture.baseTexture.height = this.canvas.height;
+    this.texture.frame.width = this.canvas.width;
+    this.texture.frame.height = this.canvas.height;
+    PIXI.texturesToUpdate.push(this.texture.baseTexture);
+};
+
+/**
+ * @private
+ */
+PIXI.Text.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+		this.updateText();	
+		this.dirty = false;
+	}
+	
+	PIXI.Sprite.prototype.updateTransform.call(this);
+};
+
+/*
+ * http://stackoverflow.com/users/34441/ellisbben
+ * great solution to the problem!
+ */
+PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
+{
+	// build a little reference dictionary so if the font style has been used return a
+	// cached version...
+	var result = PIXI.Text.heightCache[fontStyle];
+	
+	if(!result)
+	{
+		var body = document.getElementsByTagName("body")[0];
+		var dummy = document.createElement("div");
+		var dummyText = document.createTextNode("M");
+		dummy.appendChild(dummyText);
+		dummy.setAttribute("style", fontStyle);
+		body.appendChild(dummy);
+		
+		result = dummy.offsetHeight;
+		PIXI.Text.heightCache[fontStyle] = result;
+		
+		body.removeChild(dummy);
+	}
+	
+	return result;
+};
+
+PIXI.Text.prototype.destroy = function(destroyTexture)
+{
+	if(destroyTexture)
+	{
+		this.texture.destroy();
+	}
+		
+};
+
+PIXI.Text.heightCache = {};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_textures_BaseTexture.js.html b/docs/files/src_pixi_textures_BaseTexture.js.html index a7d8f96..31917f0 100644 --- a/docs/files/src_pixi_textures_BaseTexture.js.html +++ b/docs/files/src_pixi_textures_BaseTexture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_textures_Texture.js.html b/docs/files/src_pixi_textures_Texture.js.html index 35f12dc..ca52cac 100644 --- a/docs/files/src_pixi_textures_Texture.js.html +++ b/docs/files/src_pixi_textures_Texture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_Detector.js.html b/docs/files/src_pixi_utils_Detector.js.html index 6b7d031..62cc770 100644 --- a/docs/files/src_pixi_utils_Detector.js.html +++ b/docs/files/src_pixi_utils_Detector.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_EventTarget.js.html b/docs/files/src_pixi_utils_EventTarget.js.html index 929e6eb..7a794c3 100644 --- a/docs/files/src_pixi_utils_EventTarget.js.html +++ b/docs/files/src_pixi_utils_EventTarget.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_Utils.js.html b/docs/files/src_pixi_utils_Utils.js.html index c6b3b43..e46f12a 100644 --- a/docs/files/src_pixi_utils_Utils.js.html +++ b/docs/files/src_pixi_utils_Utils.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/index.html b/docs/index.html index 36c00da..f277aae 100644 --- a/docs/index.html +++ b/docs/index.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/modules/PIXI.html b/docs/modules/PIXI.html index 3cf7051..d3a42e3 100644 --- a/docs/modules/PIXI.html +++ b/docs/modules/PIXI.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -126,7 +132,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/Stage.js:5
    @@ -161,6 +167,18 @@
  • + + BitmapFontLoader + +
    • + +
  • + + BitmapText + +
    • + +
  • CanvasRenderer @@ -179,6 +197,12 @@
  • + + ImageLoader + +
    • + +
  • InteractionData diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 10 - Text/pixi.js b/examples/example 10 - Text/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 10 - Text/pixi.js +++ b/examples/example 10 - Text/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 2 - SpriteSheet/pixi.js b/examples/example 2 - SpriteSheet/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 2 - SpriteSheet/pixi.js +++ b/examples/example 2 - SpriteSheet/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 3 - MovieClip/pixi.js b/examples/example 3 - MovieClip/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 3 - MovieClip/pixi.js +++ b/examples/example 3 - MovieClip/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 4 - Balls/pixi.js b/examples/example 4 - Balls/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 4 - Balls/pixi.js +++ b/examples/example 4 - Balls/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 5 - Morph/pixi.js b/examples/example 5 - Morph/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 5 - Morph/pixi.js +++ b/examples/example 5 - Morph/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 6 - Interactivity/pixi.js b/examples/example 6 - Interactivity/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 6 - Interactivity/pixi.js +++ b/examples/example 6 - Interactivity/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 7 - Transparent Background/pixi.js b/examples/example 7 - Transparent Background/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 7 - Transparent Background/pixi.js +++ b/examples/example 7 - Transparent Background/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 8 - Dragging/pixi.js b/examples/example 8 - Dragging/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 8 - Dragging/pixi.js +++ b/examples/example 8 - Dragging/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 9 - Tiling Texture/pixi.js b/examples/example 9 - Tiling Texture/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 9 - Tiling Texture/pixi.js +++ b/examples/example 9 - Tiling Texture/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/src/pixi/text/BitmapText.js b/src/pixi/text/BitmapText.js index 5f1001d..6f5edf9 100644 --- a/src/pixi/text/BitmapText.js +++ b/src/pixi/text/BitmapText.js @@ -3,23 +3,22 @@ */ /** - * A Text Object will create a line(s) of text using bitmap font - * @class DisplayObjectContainer - * @extends Sprite + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer * @constructor * @param {String} text The copy that you would like the text to display * @param {Object} [style] The style parameters - * @param {Object} [style.font="bold 20pt Arial"] The style and size of the font - * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") - * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" - * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font PIXI.BitmapText = function(text, style) { - this.canvas = document.createElement("canvas"); - this.context = this.canvas.getContext("2d"); - PIXI.DisplayObjectContainer.call(this, PIXI.Texture.fromCanvas(this.canvas)); + PIXI.DisplayObjectContainer.call(this); this.setText(text); this.setStyle(style); @@ -91,6 +90,7 @@ prevCharCode = null; continue; } + var charData = data.chars[charCode]; if(!charData) continue; diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index 78c6bae..6063585 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/bin/pixi.js b/bin/pixi.js index d0d9b42..c81e1ec 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * 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.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],o=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*h,i[1]=c*s+u*o,i[2]=c*n+u*a+d,i[3]=l*r+I*h,i[4]=l*s+I*o,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e,i,r,s){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.setText(t),this.setStyle(e,i,r,s),this.updateText(),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas))},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.setStyle=function(t,e,i,r){this.fontStyle=t||"bold 20pt Arial",this.fillStyle=e,this.strokeStyle=i,this.strokeThickness=r||0,this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.fontStyle,this.canvas.width=this.context.measureText(this.text).width+this.strokeThickness,this.canvas.height=this.determineFontHeight("font: "+this.fontStyle+";")+this.strokeThickness,this.context.fillStyle=this.fillStyle,this.context.font=this.fontStyle,this.context.strokeStyle=this.strokeStyle,this.context.lineWidth=this.strokeThickness,this.context.textBaseline="top",this.strokeStyle&&this.strokeThickness&&this.context.strokeText(this.text,this.strokeThickness/2,this.strokeThickness/2),this.fillStyle&&this.context.fillText(this.text,this.strokeThickness/2,this.strokeThickness/2)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,I=t.texture.frame.width,f=t.texture.frame.height,p=-I*t.anchor.x;if(d>p&&p+I>d){var v=-f*t.anchor.y;if(l>v&&v+f>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,x=t.hitArea,s=r[0],n=r[1],h=r[2],o=r[3],a=r[4],c=r[5],u=1/(s*a+n*-o),d=a*u*i.x+-n*u*i.y+(c*n-h*a)*u,l=s*u*i.y+-o*u*i.x+(-c*s+h*o)*u,p=x.x;if(d>p&&p+x.width>d){var v=x.y;if(l>v&&v+x.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var b=t.children[P],T=this.hitTest(b,e);if(T)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 o=this.interactiveItems[r];o.touchmove&&o.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,o=0;h>o;o++){var a=this.interactiveItems[o];if((a.touchstart||a.tap)&&(a.__hit=this.hitTest(a,n),a.__hit&&(a.touchstart&&a.touchstart(n),a.__isDown=!0,a.__touchData=n,!a.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 o=this.interactiveItems.length,a=0;o>a;a++){var c=this.interactiveItems[a],u=c.__touchData;c.__hit=this.hitTest(c,n),u==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.__touchData=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],o=e[4],a=e[5],c=1/(r*o+s*-h);return new PIXI.Point(o*c*i.x+-s*c*i.y+(a*s-n*o)*c,r*c*i.y+-h*c*i.x+(-a*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],o=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],x=e[5],g=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*o+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*h+x*c,i[4]=p*s+v*o+x*u,i[5]=p*n+v*a+x*d,i[6]=g*r+P*h+b*c,i[7]=g*s+P*o+b*u,i[8]=g*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],h=t[7],o=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]=o,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],o=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],x=t[14],g=t[15],P=e[0],b=e[1],T=e[2],_=e[3];return i[0]=P*r+b*o+T*d+_*p,i[1]=P*s+b*a+T*l+_*v,i[2]=P*n+b*c+T*I+_*x,i[3]=P*h+b*u+T*f+_*g,P=e[4],b=e[5],T=e[6],_=e[7],i[4]=P*r+b*o+T*d+_*p,i[5]=P*s+b*a+T*l+_*v,i[6]=P*n+b*c+T*I+_*x,i[7]=P*h+b*u+T*f+_*g,P=e[8],b=e[9],T=e[10],_=e[11],i[8]=P*r+b*o+T*d+_*p,i[9]=P*s+b*a+T*l+_*v,i[10]=P*n+b*c+T*I+_*x,i[11]=P*h+b*u+T*f+_*g,P=e[12],b=e[13],T=e[14],_=e[15],i[12]=P*r+b*o+T*d+_*p,i[13]=P*s+b*a+T*l+_*v,i[14]=P*n+b*c+T*I+_*x,i[15]=P*h+b*u+T*f+_*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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=this.getBatch(),o=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(o+1,0,h,n),void 0}}}else s=i;var h=this.getBatch();if(h.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,h=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*h+s,t.uvs[3]=0-n,t.uvs[4]=1*h+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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],o=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(o,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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,o=i[h],a=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,x=r[h+3]*t.texture.height,g=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*x+v*p+f*g-x*p-v*f-I*g,b=o*x+v*c+a*g-x*c-v*a-o*g,T=I*a+o*p+f*c-a*p-o*f-I*c,_=I*x*c+v*a*p+o*f*g-o*x*p-v*f*c-I*a*g,m=u*x+v*l+d*g-x*l-v*d-u*g,X=I*d+u*p+f*l-d*p-u*f-I*l,y=I*x*l+v*d*p+u*f*g-u*x*p-v*f*l-I*d*g;e.transform(b/P,m/P,T/P,X/P,_/P,y/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,o=1;h>o;o++){var n=t[o],a=4*o,c=o/(h-1);o%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*o,r[a]=1,r[a+1]=1,a=2*o,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 h=t.length,o=1;h>o;o++){var n=t[o],a=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(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[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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],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 o=PIXI.Texture.fromImage(r,this.crossorigin);if(o.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;o.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(o)}}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(){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 root=this,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],a=t[3],o=t[4],h=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],p=e[5];i[0]=c*r+u*a,i[1]=c*s+u*o,i[2]=c*n+u*h+d,i[3]=l*r+I*a,i[4]=l*s+I*o,i[5]=l*n+I*h+p,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.swapChildren=function(t,e){var i=this.children.indexOf(t),r=this.children.indexOf(e);if(-1===i||-1===r)throw Error(t+" Both the supplied DisplayObjects must be a child of the caller "+this);this.stage&&(this.stage.__removeChild(t),this.stage.__removeChild(e),this.stage.__addChild(t),this.stage.__addChild(e)),t.childIndex=r,e.childIndex=i,this.children[i]=e,this.children[r]=t},PIXI.DisplayObjectContainer.prototype.getChildAt=function(t){if(t>=0&&this.children.length>t)return this.children[t];throw Error(child+" Both the supplied DisplayObjects must be a child of the caller "+this)},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.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),Object.defineProperty(PIXI.Sprite.prototype,"width",{get:function(){return this.scale.x*this.texture.frame.width},set:function(t){this.scale.x=t/this.texture.frame.width,this._width=t}}),Object.defineProperty(PIXI.Sprite.prototype,"height",{get:function(){return this.scale.y*this.texture.frame.height},set:function(t){this.scale.y=t/this.texture.frame.height,this._height=t}}),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this._width&&(this.scale.x=this._width/this.texture.frame.width),this._height&&(this.scale.y=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.loop=!0,this.onComplete=null,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.loop||this.textures.length>t?this.setTexture(this.textures[t%this.textures.length]):t>=this.textures.length&&(this.gotoAndStop(this.textures.length-1),this.onComplete&&this.onComplete())}},PIXI.Text=function(t,e){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),PIXI.Sprite.call(this,PIXI.Texture.fromCanvas(this.canvas)),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.Text.constructor=PIXI.Text,PIXI.Text.prototype=Object.create(PIXI.Sprite.prototype),PIXI.Text.prototype.setStyle=function(t){t=t||{},t.font=t.font||"bold 20pt Arial",t.fill=t.fill||"black",t.align=t.align||"left",t.strokeThickness=t.strokeThickness||0,this.style=t,this.dirty=!0},PIXI.Sprite.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.Text.prototype.updateText=function(){this.context.font=this.style.font;for(var t=this.text.split("\n"),e=[],i=0,r=0;t.length>r;r++){var s=this.context.measureText(t[r]).width;e[r]=s,i=Math.max(i,s)}this.canvas.width=i+this.style.strokeThickness;var n=this.determineFontHeight("font: "+this.style.font+";")+this.style.strokeThickness;for(this.canvas.height=n*t.length,this.context.fillStyle=this.style.fill,this.context.font=this.style.font,this.context.strokeStyle=this.style.stroke,this.context.lineWidth=this.style.strokeThickness,this.context.textBaseline="top",r=0;t.length>r;r++){var a=new PIXI.Point(this.style.strokeThickness/2,this.style.strokeThickness/2+r*n);"right"==this.style.align?a.x+=i-e[r]:"center"==this.style.align&&(a.x+=(i-e[r])/2),this.style.stroke&&this.style.strokeThickness&&this.context.strokeText(t[r],a.x,a.y),this.style.fill&&this.context.fillText(t[r],a.x,a.y)}this.updateTexture()},PIXI.Text.prototype.updateTexture=function(){this.texture.baseTexture.width=this.canvas.width,this.texture.baseTexture.height=this.canvas.height,this.texture.frame.width=this.canvas.width,this.texture.frame.height=this.canvas.height,PIXI.texturesToUpdate.push(this.texture.baseTexture)},PIXI.Text.prototype.updateTransform=function(){this.dirty&&(this.updateText(),this.dirty=!1),PIXI.Sprite.prototype.updateTransform.call(this)},PIXI.Text.prototype.determineFontHeight=function(t){var e=PIXI.Text.heightCache[t];if(!e){var i=document.getElementsByTagName("body")[0],r=document.createElement("div"),s=document.createTextNode("M");r.appendChild(s),r.setAttribute("style",t),i.appendChild(r),e=r.offsetHeight,PIXI.Text.heightCache[t]=e,i.removeChild(r)}return e},PIXI.Text.prototype.destroy=function(t){t&&this.texture.destroy()},PIXI.Text.heightCache={},PIXI.BitmapText=function(t,e){PIXI.DisplayObjectContainer.call(this),this.setText(t),this.setStyle(e),this.updateText(),this.dirty=!1},PIXI.BitmapText.constructor=PIXI.BitmapText,PIXI.BitmapText.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.BitmapText.prototype.setText=function(t){this.text=t||" ",this.dirty=!0},PIXI.BitmapText.prototype.setStyle=function(t){t=t||{},t.align=t.align||"left",this.style=t;var e=t.font.split(" ");this.fontName=e[e.length-1],this.fontSize=e.length>=2?parseInt(e[e.length-2],10):PIXI.BitmapText.fonts[this.fontName].size,this.dirty=!0},PIXI.BitmapText.prototype.updateText=function(){for(var t=PIXI.BitmapText.fonts[this.fontName],e=new PIXI.Point,i=null,r=[],s=0,n=[],a=0,o=this.fontSize/t.size,h=0;this.text.length>h;h++){var c=this.text.charCodeAt(h);if(c!="\n".charCodeAt(0)){var u=t.chars[c];u&&(i&&u[i]&&(e.x+=u.kerning[i]),r.push({line:a,charCode:c,position:new PIXI.Point(e.x+u.xOffset,e.y+u.yOffset)}),e.x+=u.xAdvance,i=c)}else n.push(e.x),s=Math.max(s,e.x),a++,e.x=0,e.y+=t.lineHeight,i=null}n.push(e.x),s=Math.max(s,e.x);var d=[];for(h=0;a>=h;h++){var l=0;"right"==this.style.align?l=s-n[h]:"center"==this.style.align&&(l=(s-n[h])/2),d.push(l)}for(h=0;r.length>h;h++){var I=PIXI.Sprite.fromFrame(r[h].charCode);I.position.x=(r[h].position.x+d[r[h].line])*o,I.position.y=r[h].position.y*o,I.scale.x=I.scale.y=o,this.addChild(I)}this.width=e.x*o,this.height=(e.y+t.lineHeight)*o},PIXI.BitmapText.prototype.updateTransform=function(){if(this.dirty){for(;this.children.length>0;)this.removeChild(this.getChildAt(0));this.updateText(),this.dirty=!1}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)},PIXI.BitmapText.fonts={},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){window.navigator.msPointerEnabled&&(t.view.style["-ms-content-zooming"]="none",t.view.style["-ms-touch-action"]="none"),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=!1;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}var r=this.interactiveItems.length;this.target&&(this.target.view.style.cursor="default");for(var 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.buttonMode&&(this.target.view.style.cursor="pointer"),s.__isOver||(s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0)):s.__isOver&&(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],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,I=t.texture.frame.width,p=t.texture.frame.height,f=-I*t.anchor.x;if(d>f&&f+I>d){var x=-p*t.anchor.y;if(l>x&&x+p>l)return e.target=t,!0}}else if(t.hitArea){var r=t.worldTransform,v=t.hitArea,s=r[0],n=r[1],a=r[2],o=r[3],h=r[4],c=r[5],u=1/(s*h+n*-o),d=h*u*i.x+-n*u*i.y+(c*n-a*h)*u,l=s*u*i.y+-o*u*i.x+(-c*s+a*o)*u,f=v.x;if(d>f&&f+v.width>d){var x=v.y;if(l>x&&x+v.height>l)return!0}}for(var g=t.children.length,P=0;g>P;P++){var m=t.children[P],X=this.hitTest(m,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 a=this.interactiveItems.length,r=0;a>r;r++){var o=this.interactiveItems[r];o.touchmove&&o.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 a=this.interactiveItems.length,o=0;a>o;o++){var h=this.interactiveItems[o];if((h.touchstart||h.tap)&&(h.__hit=this.hitTest(h,n),h.__hit&&(h.touchstart&&h.touchstart(n),h.__isDown=!0,h.__touchData=n,!h.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],a=!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 o=this.interactiveItems.length,h=0;o>h;h++){var c=this.interactiveItems[h],u=c.__touchData;c.__hit=this.hitTest(c,n),u==n&&((c.touchend||c.tap)&&(c.__hit&&!a?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(a=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchData=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],a=e[3],o=e[4],h=e[5],c=1/(r*o+s*-a);return new PIXI.Point(o*c*i.x+-s*c*i.y+(h*s-n*o)*c,r*c*i.y+-a*c*i.x+(-h*r+n*a)*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.getMousePosition=function(){return this.interactionManager.mouse.global},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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],p=e[2],f=e[3],x=e[4],v=e[5],g=e[6],P=e[7],m=e[8];return i[0]=l*r+I*a+p*c,i[1]=l*s+I*o+p*u,i[2]=l*n+I*h+p*d,i[3]=f*r+x*a+v*c,i[4]=f*s+x*o+v*u,i[5]=f*n+x*h+v*d,i[6]=g*r+P*a+m*c,i[7]=g*s+P*o+m*u,i[8]=g*n+P*h+m*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],a=t[7],o=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]=a,t[14]=o,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],a=t[3],o=t[4],h=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],p=t[11],f=t[12],x=t[13],v=t[14],g=t[15],P=e[0],m=e[1],X=e[2],T=e[3];return i[0]=P*r+m*o+X*d+T*f,i[1]=P*s+m*h+X*l+T*x,i[2]=P*n+m*c+X*I+T*v,i[3]=P*a+m*u+X*p+T*g,P=e[4],m=e[5],X=e[6],T=e[7],i[4]=P*r+m*o+X*d+T*f,i[5]=P*s+m*h+X*l+T*x,i[6]=P*n+m*c+X*I+T*v,i[7]=P*a+m*u+X*p+T*g,P=e[8],m=e[9],X=e[10],T=e[11],i[8]=P*r+m*o+X*d+T*f,i[9]=P*s+m*h+X*l+T*x,i[10]=P*n+m*c+X*I+T*v,i[11]=P*a+m*u+X*p+T*g,P=e[12],m=e[13],X=e[14],T=e[15],i[12]=P*r+m*o+X*d+T*f,i[13]=P*s+m*h+X*l+T*x,i[14]=P*n+m*c+X*I+T*v,i[15]=P*a+m*u+X*p+T*g,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){return PIXI._CompileShader(t,e,t.VERTEX_SHADER)},PIXI.CompileFragmentShader=function(t,e){return PIXI._CompileShader(t,e,t.FRAGMENT_SHADER)},PIXI._CompileShader=function(t,e,i){var r=e.join("\n"),s=t.createShader(i);return t.shaderSource(s,r),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 a=this.gl;this.batch=new PIXI.WebGLBatch(a),a.disable(a.DEPTH_TEST),a.enable(a.BLEND),a.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.getBatch=function(){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(this.gl):PIXI._batchs.pop()},PIXI.WebGLRenderer.prototype.returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},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]);for(var e=0;PIXI.texturesToDestroy.length>e;e++)this.destroyTexture(PIXI.texturesToDestroy[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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.TilingSprite?r.visible&&this.renderTilingSprite(r):r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);if(t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this))),PIXI.Texture.frameUpdates.length>0){for(var e=0;PIXI.Texture.frameUpdates.length>e;e++)PIXI.Texture.frameUpdates[e].updateFrame=!1;PIXI.Texture.frameUpdates=[]}}},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),t._powerOf2?(e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT)):(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.destroyTexture=function(t){var e=this.gl;t._glTexture&&(t._glTexture=e.createTexture(),e.deleteTexture(e.TEXTURE_2D,t._glTexture))},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),a=this.getBatch(),o=this.batchs.indexOf(r);return a.init(t),this.batchs.splice(o+1,0,a,n),void 0}}}else s=i;var a=this.getBatch();if(a.init(t),r){var o=this.batchs.indexOf(r);this.batchs.splice(o+1,0,a)}else this.batchs.push(a)}else t instanceof PIXI.TilingSprite?(this.initTilingSprite(t),this.batchs.push(t)):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&&this.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&&this.returnBatch(e),this.returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&this.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.initTilingSprite=function(t){var e=this.gl;t.verticies=new Float32Array([0,0,t.width,0,t.width,t.height,0,t.height]),t.uvs=new Float32Array([0,0,1,0,1,1,0,1]),t.colors=new Float32Array([1,1,1,1]),t.indices=new Uint16Array([0,1,3,2]),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.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.DYNAMIC_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),t.texture.baseTexture._glTexture?(e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.REPEAT),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.REPEAT),t.texture.baseTexture._powerOf2=!0):t.texture.baseTexture._powerOf2=!0},PIXI.WebGLRenderer.prototype.renderTilingSprite=function(t){var e=this.gl;this.shaderProgram;var i=t.tilePosition,r=t.tileScale,s=i.x/t.texture.baseTexture.width,n=i.y/t.texture.baseTexture.height,a=t.width/t.texture.baseTexture.width/r.x,o=t.height/t.texture.baseTexture.height/r.y;t.uvs[0]=0+s,t.uvs[1]=0-n,t.uvs[2]=1*a+s,t.uvs[3]=0-n,t.uvs[4]=1*a+s,t.uvs[5]=1*o-n,t.uvs[6]=0+s,t.uvs[7]=1*o-n,e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.uvs),this.renderStrip(t)},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.dynamicSize0&&(PIXI.Texture.frameUpdates=[])},PIXI.CanvasRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e},PIXI.CanvasRenderer.prototype.renderDisplayObject=function(t){var e=t.worldTransform,i=this.context;i.globalCompositeOperation="source-over";var r=!1;if(t.visible){if(t instanceof PIXI.Sprite){var s=t.texture.frame;s&&(i.globalAlpha=t.worldAlpha,r=!1,i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),i.drawImage(t.texture.baseTexture.source,s.x,s.y,s.width,s.height,(t.anchor.x-t.texture.trim.x)*-s.width,(t.anchor.y-t.texture.trim.y)*-s.height,s.width,s.height))}else t instanceof PIXI.Strip?(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderStrip(t)):t instanceof PIXI.TilingSprite&&(i.setTransform(e[0],e[3],e[1],e[4],e[2],e[5]),this.renderTilingSprite(t));for(var n=0;t.children.length>n;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,a=i[n],o=i[n+2],h=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(a,c),e.lineTo(o,u),e.lineTo(h,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderTilingSprite=function(t){var e=this.context;t.__tilePattern||(t.__tilePattern=e.createPattern(t.texture.baseTexture.source,"repeat")),e.beginPath();var i=t.tilePosition,r=t.tileScale;e.scale(r.x,r.y),e.translate(i.x,i.y),e.fillStyle=t.__tilePattern,e.fillRect(-i.x,-i.y,t.width/r.x,t.height/r.y),e.scale(1/r.x,1/r.y),e.translate(-i.x,-i.y),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 a=2*n,o=i[a],h=i[a+2],c=i[a+4],u=i[a+1],d=i[a+3],l=i[a+5],I=r[a]*t.texture.width,p=r[a+2]*t.texture.width,f=r[a+4]*t.texture.width,x=r[a+1]*t.texture.height,v=r[a+3]*t.texture.height,g=r[a+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(o,u),e.lineTo(h,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*v+x*f+p*g-v*f-x*p-I*g,m=o*v+x*c+h*g-v*c-x*h-o*g,X=I*h+o*f+p*c-h*f-o*p-I*c,T=I*v*c+x*h*f+o*p*g-o*v*f-x*p*c-I*h*g,b=u*v+x*l+d*g-v*l-x*d-u*g,y=I*d+u*f+p*l-d*f-u*p-I*l,_=I*v*l+x*d*f+u*p*g-u*v*f-x*p*l-I*d*g;e.transform(m/P,b/P,X/P,y/P,T/P,_/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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o,c=o/(a-1);o%2?(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1):(e[h]=c,e[h+1]=0,e[h+2]=c,e[h+3]=1),h=2*o,r[h]=1,r[h+1]=1,h=2*o,i[h]=h,i[h+1]=h+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 a=t.length,o=1;a>o;o++){var n=t[o],h=4*o;e=t.length-1>o?t[o+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-o/(a-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[h]=n.x+s.x,i[h+1]=n.y+s.y,i[h+2]=n.x-s.x,i[h+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.TilingSprite=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.width=e,this.height=i,this.renderable=!0,this.tileScale=new PIXI.Point(2,1),this.tilePosition=new PIXI.Point(0,0),this.blendMode=PIXI.blendModes.NORMAL},PIXI.TilingSprite.constructor=PIXI.TilingSprite,PIXI.TilingSprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.TilingSprite.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.TilingSprite.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.texturesToDestroy=[],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);this._powerOf2=!1},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.destroy=function(){this.source instanceof Image&&(this.source.src=null),this.source=null,PIXI.texturesToDestroy.push(this)},PIXI.BaseTexture.fromImage=function(t,e){var i=PIXI.BaseTextureCache[t];if(!i){var r=new Image;e&&(r.crossOrigin=""),r.src=t,i=new PIXI.BaseTexture(r),PIXI.BaseTextureCache[t]=i}return i},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,t instanceof PIXI.Texture&&(t=t.baseTexture),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.destroy=function(t){t&&this.baseTexture.destroy()},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);this.updateFrame=!0,PIXI.Texture.frameUpdates.push(this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];return i||(i=new PIXI.Texture(PIXI.BaseTexture.fromImage(t,e)),PIXI.TextureCache[t]=i),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.Texture.frameUpdates=[],PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.crossorigin=!1,this.loadersByType={jpg:PIXI.ImageLoader,jpeg:PIXI.ImageLoader,png:PIXI.ImageLoader,gif:PIXI.ImageLoader,json:PIXI.SpriteSheetLoader,xml:PIXI.BitmapFontLoader,fnt:PIXI.BitmapFontLoader}},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){var t=this;this.loadCount=this.assetURLs.length;for(var e=0;this.assetURLs.length>e;e++){var i=this.assetURLs[e],r=i.split(".").pop().toLowerCase(),s=this.loadersByType[r];if(!s)throw Error(r+" is an unsupported file type");var n=new s(i,this.crossorigin);n.addEventListener("loaded",function(){t.onAssetLoaded()}),n.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())},PIXI.SpriteSheetLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.frames={},this.crossorigin=e},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onJSONLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onJSONLoaded=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,image=new PIXI.ImageLoader(textureUrl,this.crossorigin);this.texture=image.texture.baseTexture;var scope=this;image.addEventListener("loaded",function(){scope.onLoaded()});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))}image.load()}},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.ImageLoader=function(t,e){PIXI.EventTarget.call(this),this.texture=PIXI.Texture.fromImage(t,e)},PIXI.ImageLoader.constructor=PIXI.ImageLoader,PIXI.ImageLoader.prototype.load=function(){if(this.texture.baseTexture.hasLoaded)this.onLoaded();else{var t=this;this.texture.baseTexture.addEventListener("loaded",function(){t.onLoaded()})}},PIXI.ImageLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},PIXI.BitmapFontLoader=function(t,e){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture=null,this.crossorigin=e},PIXI.BitmapFontLoader.constructor=PIXI.BitmapFontLoader,PIXI.BitmapFontLoader.prototype.load=function(){this.ajaxRequest=new XMLHttpRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onXMLLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/xml"),this.ajaxRequest.send(null)},PIXI.BitmapFontLoader.prototype.onXMLLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var t=this.baseUrl+this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue,e=new PIXI.ImageLoader(t,this.crossorigin);this.texture=e.texture.baseTexture;var i={},r=this.ajaxRequest.responseXML.getElementsByTagName("info")[0],s=this.ajaxRequest.responseXML.getElementsByTagName("common")[0];i.font=r.attributes.getNamedItem("face").nodeValue,i.size=parseInt(r.attributes.getNamedItem("size").nodeValue,10),i.lineHeight=parseInt(s.attributes.getNamedItem("lineHeight").nodeValue,10),i.chars={};for(var n=this.ajaxRequest.responseXML.getElementsByTagName("char"),a=0;n.length>a;a++){var o=parseInt(n[a].attributes.getNamedItem("id").nodeValue,10),h={x:parseInt(n[a].attributes.getNamedItem("x").nodeValue,10),y:parseInt(n[a].attributes.getNamedItem("y").nodeValue,10),width:parseInt(n[a].attributes.getNamedItem("width").nodeValue,10),height:parseInt(n[a].attributes.getNamedItem("height").nodeValue,10)};PIXI.TextureCache[o]=new PIXI.Texture(this.texture,h),i.chars[o]={xOffset:parseInt(n[a].attributes.getNamedItem("xoffset").nodeValue,10),yOffset:parseInt(n[a].attributes.getNamedItem("yoffset").nodeValue,10),xAdvance:parseInt(n[a].attributes.getNamedItem("xadvance").nodeValue,10),kerning:{}}}var c=this.ajaxRequest.responseXML.getElementsByTagName("kerning");for(a=0;c.length>a;a++){var u=parseInt(c[a].attributes.getNamedItem("first").nodeValue,10),d=parseInt(c[a].attributes.getNamedItem("second").nodeValue,10),l=parseInt(c[a].attributes.getNamedItem("amount").nodeValue,10);i.chars[d].kerning[u]=l}PIXI.BitmapText.fonts[i.font]=i;var I=this;e.addEventListener("loaded",function(){I.onLoaded()}),e.load()}},PIXI.BitmapFontLoader.prototype.onLoaded=function(){this.dispatchEvent({type:"loaded",content:this})},"undefined"!=typeof exports?("undefined"!=typeof module&&module.exports&&(exports=module.exports=PIXI),exports.PIXI=PIXI):root.PIXI=PIXI}).call(this); \ No newline at end of file diff --git a/docs/api.js b/docs/api.js index 601b8ab..aa7cd2e 100644 --- a/docs/api.js +++ b/docs/api.js @@ -3,9 +3,12 @@ "classes": [ "AssetLoader", "BaseTexture", + "BitmapFontLoader", + "BitmapText", "CanvasRenderer", "DisplayObject", "DisplayObjectContainer", + "ImageLoader", "InteractionData", "InteractionManager", "MovieClip", diff --git a/docs/classes/AssetLoader.html b/docs/classes/AssetLoader.html index 514d11c..c6cf3d9 100644 --- a/docs/classes/AssetLoader.html +++ b/docs/classes/AssetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -146,9 +152,9 @@
    -

    A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() -When all items have been loaded this class will dispatch a 'loaded' event -As each individual item is loaded this class will dispatch a 'progress' event

    +

    A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() +When all items have been loaded this class will dispatch a "onLoaded" event +As each individual item is loaded this class will dispatch a "onProgress" event

    @@ -225,7 +231,7 @@
    -

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time

    +

    an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt".

    @@ -391,7 +397,7 @@ - src/pixi/loaders/AssetLoader.js:35 + src/pixi/loaders/AssetLoader.js:43

    @@ -434,7 +440,7 @@ - src/pixi/loaders/AssetLoader.js:30 + src/pixi/loaders/AssetLoader.js:38

    diff --git a/docs/classes/BaseTexture.html b/docs/classes/BaseTexture.html index f5e26c5..42c09de 100644 --- a/docs/classes/BaseTexture.html +++ b/docs/classes/BaseTexture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/BitmapFontLoader.html b/docs/classes/BitmapFontLoader.html new file mode 100644 index 0000000..ba89a2e --- /dev/null +++ b/docs/classes/BitmapFontLoader.html @@ -0,0 +1,322 @@ + + + + + BitmapFontLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapFontLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/BitmapFontLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The xml loader is used to load in XML bitmap font data ("xml" or "fnt") +To generate the data you can use http://www.angelcode.com/products/bmfont/ +This loader will also load the image file as the data. +When loaded this class will dispatch a "loaded" event

    +
    + + +
    +

    Constructor

    +
    +

    BitmapFontLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/BitmapFontLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      the url of the sprite sheet JSON file

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/BitmapText.html b/docs/classes/BitmapText.html new file mode 100644 index 0000000..23ba7d0 --- /dev/null +++ b/docs/classes/BitmapText.html @@ -0,0 +1,2496 @@ + + + + + BitmapText - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    BitmapText Class

    +
    + + + +
    + Extends DisplayObjectContainer +
    + + + +
    + Defined in: src/pixi/text/BitmapText.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    A Text Object will create a line(s) of text using bitmap font +You can generate the fnt files using +http://www.angelcode.com/products/bmfont/ for windows of +http://www.bmglyph.com/ for mac.

    +
    + + +
    +

    Constructor

    +
    +

    BitmapText

    + + +
    + (
      + +
    • + + text + +
      • + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + text + String + + + + +
      +

      The copy that you would like the text to display

      +
      + + +
      • + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + [font] + String + optional + + +
        +

        default is "20pt Arial" The size and bitmap font id (must have loaded previously)

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + +
    +

    Methods

    + + +
    + + + +
    +

    Properties

    + + +
    + + + + + +
    + + +
    +

    Methods

    + + +
    +

    addChild

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:29 + +

    + + + + + +
    + +
    +

    Adds a child to the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    addChildAt

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:51 + +

    + + + + + +
    + +
    +

    Adds a child to the container at a specified index. If the index is out of bounds an error will be thrown

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + DisplayObject + DisplayObject + + + + +
      + +
      + + +
      • + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    getChildAt

    + + +
    + (
      + +
    • + + index + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:137 + +

    + + + + + +
    + +
    +

    Returns the Child at the specified index

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + index + Number + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    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:129 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:109 + +

    + + + + + +
    + +
    +

    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:116 + +

    + + + + + +
    + +
    +

    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

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:155 + +

    + + + + + +
    + +
    +

    Removes a child from the container.

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:170 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    setStyle

    + + +
    + (
      + +
    • + + [style] + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/text/BitmapText.js:45 + +

    + + + + + +
    + +
    +

    Set the style of the text

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + [style] + Object + optional + + + + +
      +

      The style parameters

      +
      + + +
        + +
      • + + font + Object + + +
        +

        The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required

        +
        + + +
        • + +
      • + + [align="left"] + String + optional + + +
        +

        An alignment of the multiline text ("left", "center" or "right")

        +
        + + +
        • + +
      + +
      • + +
    +
    + + + + + +
    + + +
    +

    swapChildren

    + + +
    + (
      + +
    • + + DisplayObject + +
      • + +
    • + + DisplayObject2 + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:97 + +

    + + + + + +
    + +
    +

    Swaps the depth of 2 displayObjects

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:140 + +

    + + + + + +
    + +
    +

    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:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:159 + +

    + + + + + +
    + +
    +

    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:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    + + + +
    +

    Properties

    + + +
    +

    alpha

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:33 + +

    + + + + +
    + +
    +

    The opacity of the object.

    +
    + + + + + + +
    + + +
    +

    buttonMode

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:86 + +

    + + + + +
    + +
    +

    This is used to indicate if the displayObject should display a mouse hand cursor on rollover

    +
    + + + + + + +
    + + +
    +

    children

    + Array + + + + + + + + + +
    + + +

    Inherited from + DisplayObjectContainer: + + + + src/pixi/DisplayObjectContainer.js:16 + +

    + + + + +
    + +
    +

    [read-only] The of children of this container.

    +
    + + + + + + +
    + + +
    +

    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 + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:48 + +

    + + + + +
    + +
    +

    [read-only] The display object container that contains this display object.

    +
    + + + + + + +
    + + +
    +

    position

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:12 + +

    + + + + +
    + +
    +

    The coordinate of the object relative to the local coordinates of the parent.

    +
    + + + + + + +
    + + +
    +

    rotation

    + Number + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:26 + +

    + + + + +
    + +
    +

    The rotation of the object in radians.

    +
    + + + + + + +
    + + +
    +

    scale

    + Point + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:19 + +

    + + + + +
    + +
    +

    The scale factor of the object.

    +
    + + + + + + +
    + + +
    +

    stage

    + Stage + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:55 + +

    + + + + +
    + +
    +

    [read-only] The stage the display object is connected to, or undefined if it is not connected to the stage.

    +
    + + + + + + +
    + + +
    +

    visible

    + Boolean + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:40 + +

    + + + + +
    + +
    +

    The visibility of the object.

    +
    + + + + + + +
    + + +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/CanvasRenderer.html b/docs/classes/CanvasRenderer.html index 46f4623..9da3303 100644 --- a/docs/classes/CanvasRenderer.html +++ b/docs/classes/CanvasRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index dcac38f..f0ca27d 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 982d235..427d379 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/ImageLoader.html b/docs/classes/ImageLoader.html new file mode 100644 index 0000000..d8dd536 --- /dev/null +++ b/docs/classes/ImageLoader.html @@ -0,0 +1,321 @@ + + + + + ImageLoader - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    ImageLoader Class

    +
    + + + +
    + Extends EventTarget +
    + + + +
    + Defined in: src/pixi/loaders/ImageLoader.js:5 +
    + + + + + Module: PIXI + + + + +
    + + + +
    +

    The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") +Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() +When loaded this class will dispatch a 'loaded' event

    +
    + + +
    +

    Constructor

    +
    +

    ImageLoader

    + + +
    + (
      + +
    • + + url + +
      • + +
    • + + crossorigin + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/loaders/ImageLoader.js:5 + +

    + + + + + +
    + +
    + +
    + + +
    +

    Parameters:

    + +
      + +
    • + + url + String + + + + +
      +

      The url of the image

      +
      + + +
      • + +
    • + + crossorigin + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + +
    + + +
    + + +
    +
    +

    Item Index

    + + + + + + + + +
    + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index c59504a..0704161 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index bb1f3cd..2baa1fe 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 3541027..becc1aa 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Point.html b/docs/classes/Point.html index 2f47313..fe9c94a 100644 --- a/docs/classes/Point.html +++ b/docs/classes/Point.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Rectangle.html b/docs/classes/Rectangle.html index 810e560..5afe2c1 100644 --- a/docs/classes/Rectangle.html +++ b/docs/classes/Rectangle.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index 5a3bd4f..e96a940 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/SpriteSheetLoader.html b/docs/classes/SpriteSheetLoader.html index 7e95eae..d345bf9 100644 --- a/docs/classes/SpriteSheetLoader.html +++ b/docs/classes/SpriteSheetLoader.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -149,10 +155,10 @@

    The sprite sheet loader is used to load in JSON sprite sheet data To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format There is a free version so thats nice, although the paid version is great value for money. -It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. +It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() This loader will also load the image file that the Spritesheet points to as well as the data. -When loaded this class will dispatch a 'loaded' event

    +When loaded this class will dispatch a "loaded" event

    @@ -171,6 +177,12 @@ +
  • + + crossorigin + +
    • + ) @@ -235,6 +247,21 @@ +
  • + + crossorigin + Boolean + + + + +
    + +
    + + +
    • + diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index 057db18..f7efaa8 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/Text.html b/docs/classes/Text.html index ee0adde..a25533f 100644 --- a/docs/classes/Text.html +++ b/docs/classes/Text.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,7 +136,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/text/Text.js:5
    @@ -146,7 +152,7 @@
    -

    A Text Object will create a line of text

    +

    A Text Object will create a line(s) of text to split a line you can use "\n"

    @@ -167,25 +173,7 @@
  • - fontStyle - -
    • - -
  • - - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style]
    • @@ -218,7 +206,7 @@ - src/pixi/Text.js:5 + src/pixi/text/Text.js:5

    @@ -255,61 +243,91 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    -
    • - -
  • - - strokeStyle - String - +
      + +
    • + + [font] + String + optional + - +
      +

      default "bold 20pt Arial" The style and size of the font

      +
      -
      -

      a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

      -
      + +
      • + +
    • + + [fill="black"] + Object + optional + - -
      • - -
    • - - strokeThickness - Number - +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      - + +
      • + +
    • + + [align="left"] + String + optional + -
      -

      A number that represents the thicknes of the stroke. default is 0 (no stroke)

      -
      +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    • @@ -672,7 +690,7 @@
    - +
    @@ -762,7 +780,7 @@
    - +
    @@ -777,7 +795,7 @@
    - +
    @@ -945,7 +963,7 @@
    - +
    @@ -1451,7 +1469,7 @@
    - +
    @@ -1560,25 +1578,13 @@
  • - fontStyle + [style]
  • - fillStyle - -
    • - -
  • - - strokeStyle - -
    • - -
  • - - strokeThickness + [style.font="bold
    • @@ -1611,7 +1617,7 @@ - src/pixi/Text.js:47 + src/pixi/text/Text.js:34

    @@ -1633,59 +1639,90 @@
  • - fontStyle - String - - - - -
    -

    the style and size of the font eg "bold 20px Arial"

    -
    - - -
    • - -
  • - - fillStyle + [style] Object + optional
    -

    a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null

    +

    The style parameters

    +
      + +
    • + + [fill="black"] + Object + optional + + +
      +

      A canvas fillstyle that will be used on the text eg "red", "#00FF00"

      +
      + + +
      • + +
    • + + [align="left"] + String + optional + + +
      +

      An alignment of the multiline text ("left", "center" or "right")

      +
      + + +
      • + +
    • + + [stroke] + String + optional + + +
      +

      A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"

      +
      + + +
      • + +
    • + + [strokeThickness=0] + Number + optional + + +
      +

      A number that represents the thickness of the stroke. Default is 0 (no stroke)

      +
      + + +
      • + +
    +
  • - strokeStyle + [style.font="bold String
    -

    a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null

    -
    - - -
    • - -
  • - - strokeThickness - Number - - - - -
    -

    A number that represents the thicknes of the stroke. default is 0 (no stroke)

    +

    20pt Arial"] The style and size of the font

    @@ -1859,7 +1896,7 @@
    - +
    @@ -1874,7 +1911,7 @@
    - +
    diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 472d2da..4d9ad5d 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/TilingSprite.html b/docs/classes/TilingSprite.html index 1effea3..2a04606 100644 --- a/docs/classes/TilingSprite.html +++ b/docs/classes/TilingSprite.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLBatch.html b/docs/classes/WebGLBatch.html index 8f678cb..902a812 100644 --- a/docs/classes/WebGLBatch.html +++ b/docs/classes/WebGLBatch.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index b538053..942fa7d 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/data.json b/docs/data.json index d46c7ec..a4b2cb3 100644 --- a/docs/data.json +++ b/docs/data.json @@ -39,6 +39,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/loaders/BitmapFontLoader.js": { + "name": "src/pixi/loaders/BitmapFontLoader.js", + "modules": {}, + "classes": { + "BitmapFontLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/loaders/ImageLoader.js": { + "name": "src/pixi/loaders/ImageLoader.js", + "modules": {}, + "classes": { + "ImageLoader": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/loaders/SpriteSheetLoader.js": { "name": "src/pixi/loaders/SpriteSheetLoader.js", "modules": {}, @@ -82,6 +100,24 @@ "fors": {}, "namespaces": {} }, + "src/pixi/text/BitmapText.js": { + "name": "src/pixi/text/BitmapText.js", + "modules": {}, + "classes": { + "BitmapText": 1 + }, + "fors": {}, + "namespaces": {} + }, + "src/pixi/text/Text.js": { + "name": "src/pixi/text/Text.js", + "modules": {}, + "classes": { + "Text": 1 + }, + "fors": {}, + "namespaces": {} + }, "src/pixi/textures/BaseTexture.js": { "name": "src/pixi/textures/BaseTexture.js", "modules": {}, @@ -149,6 +185,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Intro.js": { + "name": "src/pixi/Intro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/MovieClip.js": { "name": "src/pixi/MovieClip.js", "modules": {}, @@ -158,6 +201,13 @@ "fors": {}, "namespaces": {} }, + "src/pixi/Outro.js": { + "name": "src/pixi/Outro.js", + "modules": {}, + "classes": {}, + "fors": {}, + "namespaces": {} + }, "src/pixi/Pixi.js": { "name": "src/pixi/Pixi.js", "modules": { @@ -202,15 +252,6 @@ }, "fors": {}, "namespaces": {} - }, - "src/pixi/Text.js": { - "name": "src/pixi/Text.js", - "modules": {}, - "classes": { - "Text": 1 - }, - "fors": {}, - "namespaces": {} } }, "modules": { @@ -220,10 +261,14 @@ "classes": { "TilingSprite": 1, "AssetLoader": 1, + "BitmapFontLoader": 1, + "ImageLoader": 1, "SpriteSheetLoader": 1, "CanvasRenderer": 1, "WebGLBatch": 1, "WebGLRenderer": 1, + "BitmapText": 1, + "Text": 1, "BaseTexture": 1, "Texture": 1, "DisplayObject": 1, @@ -234,13 +279,12 @@ "Point": 1, "Rectangle": 1, "Sprite": 1, - "Stage": 1, - "Text": 1 + "Stage": 1 }, "fors": {}, "namespaces": {}, "tag": "module", - "file": "src/pixi/Text.js", + "file": "src/pixi/Stage.js", "line": 5 } }, @@ -288,17 +332,71 @@ "module": "PIXI", "file": "src/pixi/loaders/AssetLoader.js", "line": 5, - "description": "A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId()\nWhen all items have been loaded this class will dispatch a 'loaded' event\nAs each individual item is loaded this class will dispatch a 'progress' event", + "description": "A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()\nWhen all items have been loaded this class will dispatch a \"onLoaded\" event\nAs each individual item is loaded this class will dispatch a \"onProgress\" event", "is_constructor": 1, "extends": "EventTarget", "params": [ { "name": "assetURLs", - "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time", + "description": "an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include \"jpeg\", \"jpg\", \"png\", \"gif\". Supported sprite sheet data formats only include \"JSON\" at this time. Supported bitmap font data formats include \"xml\" and \"fnt\".", "type": "Array" } ] }, + "BitmapFontLoader": { + "name": "BitmapFontLoader", + "shortname": "BitmapFontLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 5, + "description": "The xml loader is used to load in XML bitmap font data (\"xml\" or \"fnt\")\nTo generate the data you can use http://www.angelcode.com/products/bmfont/\nThis loader will also load the image file as the data.\nWhen loaded this class will dispatch a \"loaded\" event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "the url of the sprite sheet JSON file", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, + "ImageLoader": { + "name": "ImageLoader", + "shortname": "ImageLoader", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/loaders/ImageLoader.js", + "line": 5, + "description": "The image loader class is responsible for loading images file formats (\"jpeg\", \"jpg\", \"png\" and \"gif\")\nOnce the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nWhen loaded this class will dispatch a 'loaded' event", + "extends": "EventTarget", + "is_constructor": 1, + "params": [ + { + "name": "url", + "description": "The url of the image", + "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" + } + ] + }, "SpriteSheetLoader": { "name": "SpriteSheetLoader", "shortname": "SpriteSheetLoader", @@ -310,7 +408,7 @@ "module": "PIXI", "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 5, - "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a 'loaded' event", + "description": "The sprite sheet loader is used to load in JSON sprite sheet data\nTo generate the data you can use http://www.codeandweb.com/texturepacker and publish the \"JSON\" format\nThere is a free version so thats nice, although the paid version is great value for money.\nIt is highly recommended to use Sprite sheets (also know as texture atlas\") as it means sprite\"s can be batched and drawn together for highly increased rendering speed.\nOnce the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()\nThis loader will also load the image file that the Spritesheet points to as well as the data.\nWhen loaded this class will dispatch a \"loaded\" event", "extends": "EventTarget", "is_constructor": 1, "params": [ @@ -318,6 +416,11 @@ "name": "url", "description": "the url of the sprite sheet JSON file", "type": "String" + }, + { + "name": "crossorigin", + "description": "", + "type": "Boolean" } ] }, @@ -418,6 +521,112 @@ ], "default": "false" }, + "BitmapText": { + "name": "BitmapText", + "shortname": "BitmapText", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/BitmapText.js", + "line": 5, + "description": "A Text Object will create a line(s) of text using bitmap font \nYou can generate the fnt files using \nhttp://www.angelcode.com/products/bmfont/ for windows of\nhttp://www.bmglyph.com/ for mac.", + "extends": "DisplayObjectContainer", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default is \"20pt Arial\" The size and bitmap font id (must have loaded previously)", + "type": "String", + "optional": true + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ] + }, + "Text": { + "name": "Text", + "shortname": "Text", + "classitems": [], + "plugins": [], + "extensions": [], + "plugin_for": [], + "extension_for": [], + "module": "PIXI", + "file": "src/pixi/text/Text.js", + "line": 5, + "description": "A Text Object will create a line(s) of text to split a line you can use \"\\n\"", + "extends": "Sprite", + "is_constructor": 1, + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + }, + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "default \"bold 20pt Arial\" The style and size of the font", + "type": "String", + "optional": true + }, + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + } + ] + }, "BaseTexture": { "name": "BaseTexture", "shortname": "BaseTexture", @@ -667,49 +876,6 @@ "type": "Boolean" } ] - }, - "Text": { - "name": "Text", - "shortname": "Text", - "classitems": [], - "plugins": [], - "extensions": [], - "plugin_for": [], - "extension_for": [], - "module": "PIXI", - "namespace": "", - "file": "src/pixi/Text.js", - "line": 5, - "description": "A Text Object will create a line of text", - "extends": "Sprite", - "is_constructor": 1, - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - }, - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ] } }, "classitems": [ @@ -766,7 +932,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 30, + "line": 38, "description": "Fired when an item has loaded", "itemtype": "event", "name": "onProgress", @@ -774,7 +940,7 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 35, + "line": 43, "description": "Fired when all the assets have loaded", "itemtype": "event", "name": "onComplete", @@ -782,11 +948,67 @@ }, { "file": "src/pixi/loaders/AssetLoader.js", - "line": 43, + "line": 51, "description": "This will begin loading the assets sequentially", "class": "AssetLoader" }, { + "file": "src/pixi/loaders/AssetLoader.js", + "line": 79, + "description": "Invoked after each file is loaded", + "access": "private", + "tagname": "", + "class": "AssetLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 34, + "description": "This will begin loading the JSON file", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 51, + "description": "Invoked when XML file is loaded", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/BitmapFontLoader.js", + "line": 118, + "description": "Invoked when all files are loaded (xml/fnt and texture)", + "access": "private", + "tagname": "", + "class": "BitmapFontLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 24, + "description": "Loads image or takes it from cache", + "class": "ImageLoader" + }, + { + "file": "src/pixi/loaders/ImageLoader.js", + "line": 43, + "description": "Invoked when image file is loaded or it is already cached and ready to use", + "access": "private", + "tagname": "", + "class": "ImageLoader" + }, + { "file": "src/pixi/loaders/SpriteSheetLoader.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -794,11 +1016,27 @@ }, { "file": "src/pixi/loaders/SpriteSheetLoader.js", - "line": 37, + "line": 38, "description": "This will begin loading the JSON file", "class": "SpriteSheetLoader" }, { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 55, + "description": "Invoke when JSON file is loaded", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { + "file": "src/pixi/loaders/SpriteSheetLoader.js", + "line": 97, + "description": "Invoke when all files are loaded (json and texture)", + "access": "private", + "tagname": "", + "class": "SpriteSheetLoader" + }, + { "file": "src/pixi/renderers/CanvasRenderer.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1205,7 +1443,165 @@ "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "BaseTexture" + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 34, + "description": "Set the copy for the text object", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 45, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "font", + "description": "The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required", + "type": "Object" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + } + ] + } + ], + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 65, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/BitmapText.js", + "line": 138, + "access": "private", + "tagname": "", + "class": "BitmapText" + }, + { + "file": "src/pixi/text/Text.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 34, + "description": "Set the style of the text", + "itemtype": "method", + "name": "setStyle", + "params": [ + { + "name": "style", + "description": "The style parameters", + "type": "Object", + "optional": true, + "props": [ + { + "name": "fill", + "description": "A canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\"", + "type": "Object", + "optional": true, + "optdefault": "\"black\"" + }, + { + "name": "align", + "description": "An alignment of the multiline text (\"left\", \"center\" or \"right\")", + "type": "String", + "optional": true, + "optdefault": "\"left\"" + }, + { + "name": "stroke", + "description": "A canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\"", + "type": "String", + "optional": true + }, + { + "name": "strokeThickness", + "description": "A number that represents the thickness of the stroke. Default is 0 (no stroke)", + "type": "Number", + "optional": true, + "optdefault": "0" + } + ] + }, + { + "name": "[style.font=\"bold", + "description": "20pt Arial\"] The style and size of the font", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 55, + "description": "Set the copy for the text object. To split a line you can use \"\\n\"", + "methos": "setText", + "params": [ + { + "name": "text", + "description": "The copy that you would like the text to display", + "type": "String" + } + ], + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 66, + "description": "Renders text", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 129, + "description": "Updates texture size based on canvas size", + "access": "private", + "tagname": "", + "class": "Text" + }, + { + "file": "src/pixi/text/Text.js", + "line": 143, + "access": "private", + "tagname": "", + "class": "Text" }, { "file": "src/pixi/textures/BaseTexture.js", @@ -1886,6 +2282,12 @@ "class": "InteractionData" }, { + "file": "src/pixi/Intro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "MovieClip" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1992,6 +2394,12 @@ "class": "MovieClip" }, { + "file": "src/pixi/Outro.js", + "line": 1, + "author": "Mat Groves http://matgroves.com/ @Doormat23", + "class": "Point" + }, + { "file": "src/pixi/Pixi.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -2257,68 +2665,6 @@ }, "class": "Stage", "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 1, - "author": "Mat Groves http://matgroves.com/ @Doormat23", - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 36, - "description": "Set the copy for the text object", - "methos": "setText", - "params": [ - { - "name": "text", - "description": "The copy that you would like the text to display", - "type": "String" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 47, - "description": "Set the style of the text", - "itemtype": "method", - "name": "setStyle", - "is_constructor": 1, - "params": [ - { - "name": "fontStyle", - "description": "the style and size of the font eg \"bold 20px Arial\"", - "type": "String" - }, - { - "name": "fillStyle", - "description": "a canvas fillstyle that will be used on the text eg \"red\", \"#00FF00\" can also be null", - "type": "Object" - }, - { - "name": "strokeStyle", - "description": "a canvas fillstyle that will be used on the text stroke eg \"blue\", \"#FCFF00\" can also be null", - "type": "String" - }, - { - "name": "strokeThickness", - "description": "A number that represents the thicknes of the stroke. default is 0 (no stroke)", - "type": "Number" - } - ], - "class": "Text", - "module": "PIXI" - }, - { - "file": "src/pixi/Text.js", - "line": 66, - "access": "private", - "tagname": "", - "class": "Text", - "module": "PIXI" } ], "warnings": [ @@ -2327,12 +2673,16 @@ "line": " src/pixi/renderers/WebGLBatch.js:292" }, { - "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:37" + "message": "unknown tag: methos", + "line": " src/pixi/text/BitmapText.js:34" }, { "message": "unknown tag: methos", - "line": " src/pixi/Text.js:36" + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "unknown tag: internal", + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2352,7 +2702,39 @@ }, { "message": "Missing item type\nThis will begin loading the assets sequentially", - "line": " src/pixi/loaders/AssetLoader.js:43" + "line": " src/pixi/loaders/AssetLoader.js:51" + }, + { + "message": "Missing item type\nInvoked after each file is loaded", + "line": " src/pixi/loaders/AssetLoader.js:79" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/BitmapFontLoader.js:1" + }, + { + "message": "Missing item type\nThis will begin loading the JSON file", + "line": " src/pixi/loaders/BitmapFontLoader.js:34" + }, + { + "message": "Missing item type\nInvoked when XML file is loaded", + "line": " src/pixi/loaders/BitmapFontLoader.js:51" + }, + { + "message": "Missing item type\nInvoked when all files are loaded (xml/fnt and texture)", + "line": " src/pixi/loaders/BitmapFontLoader.js:118" + }, + { + "message": "Missing item type", + "line": " src/pixi/loaders/ImageLoader.js:1" + }, + { + "message": "Missing item type\nLoads image or takes it from cache", + "line": " src/pixi/loaders/ImageLoader.js:24" + }, + { + "message": "Missing item type\nInvoked when image file is loaded or it is already cached and ready to use", + "line": " src/pixi/loaders/ImageLoader.js:43" }, { "message": "Missing item type", @@ -2360,7 +2742,15 @@ }, { "message": "Missing item type\nThis will begin loading the JSON file", - "line": " src/pixi/loaders/SpriteSheetLoader.js:37" + "line": " src/pixi/loaders/SpriteSheetLoader.js:38" + }, + { + "message": "Missing item type\nInvoke when JSON file is loaded", + "line": " src/pixi/loaders/SpriteSheetLoader.js:55" + }, + { + "message": "Missing item type\nInvoke when all files are loaded (json and texture)", + "line": " src/pixi/loaders/SpriteSheetLoader.js:97" }, { "message": "Missing item type", @@ -2472,6 +2862,42 @@ }, { "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object", + "line": " src/pixi/text/BitmapText.js:34" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/BitmapText.js:65" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/BitmapText.js:138" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:1" + }, + { + "message": "Missing item type\nSet the copy for the text object. To split a line you can use \"\\n\"", + "line": " src/pixi/text/Text.js:55" + }, + { + "message": "Missing item type\nRenders text", + "line": " src/pixi/text/Text.js:66" + }, + { + "message": "Missing item type\nUpdates texture size based on canvas size", + "line": " src/pixi/text/Text.js:129" + }, + { + "message": "Missing item type", + "line": " src/pixi/text/Text.js:143" + }, + { + "message": "Missing item type", "line": " src/pixi/textures/BaseTexture.js:1" }, { @@ -2516,10 +2942,18 @@ }, { "message": "Missing item type", + "line": " src/pixi/Intro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/MovieClip.js:1" }, { "message": "Missing item type", + "line": " src/pixi/Outro.js:1" + }, + { + "message": "Missing item type", "line": " src/pixi/Pixi.js:1" }, { @@ -2541,18 +2975,6 @@ { "message": "Missing item type", "line": " src/pixi/Stage.js:1" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:1" - }, - { - "message": "Missing item type\nSet the copy for the text object", - "line": " src/pixi/Text.js:36" - }, - { - "message": "Missing item type", - "line": " src/pixi/Text.js:66" } ] } \ No newline at end of file diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index ade9fcf..27f0bfd 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_DisplayObjectContainer.js.html b/docs/files/src_pixi_DisplayObjectContainer.js.html index fd35a09..f639e35 100644 --- a/docs/files/src_pixi_DisplayObjectContainer.js.html +++ b/docs/files/src_pixi_DisplayObjectContainer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 8539c64..ced694f 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Intro.js.html b/docs/files/src_pixi_Intro.js.html new file mode 100644 index 0000000..cae108d --- /dev/null +++ b/docs/files/src_pixi_Intro.js.html @@ -0,0 +1,157 @@ + + + + + src/pixi/Intro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Intro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+(function(){
+
+	var root = this;
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_MovieClip.js.html b/docs/files/src_pixi_MovieClip.js.html index 85c10a7..38b101c 100644 --- a/docs/files/src_pixi_MovieClip.js.html +++ b/docs/files/src_pixi_MovieClip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Outro.js.html b/docs/files/src_pixi_Outro.js.html new file mode 100644 index 0000000..af2413b --- /dev/null +++ b/docs/files/src_pixi_Outro.js.html @@ -0,0 +1,164 @@ + + + + + src/pixi/Outro.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/Outro.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+ if (typeof exports !== 'undefined') {
+    if (typeof module !== 'undefined' && module.exports) {
+      exports = module.exports = PIXI;
+    }
+    exports.PIXI = PIXI;
+  } else {
+    root.PIXI = PIXI;
+  }
+
+
+}).call(this);
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_Pixi.js.html b/docs/files/src_pixi_Pixi.js.html index 445cd7a..9a2d7fd 100644 --- a/docs/files/src_pixi_Pixi.js.html +++ b/docs/files/src_pixi_Pixi.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Point.js.html b/docs/files/src_pixi_Point.js.html index be61b09..f7d0ba0 100644 --- a/docs/files/src_pixi_Point.js.html +++ b/docs/files/src_pixi_Point.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Rectangle.js.html b/docs/files/src_pixi_Rectangle.js.html index 7c87291..3ef5bf7 100644 --- a/docs/files/src_pixi_Rectangle.js.html +++ b/docs/files/src_pixi_Rectangle.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3fdab5f..e75c3be 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index f5adb58..02325a1 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_Text.js.html b/docs/files/src_pixi_Text.js.html deleted file mode 100644 index 33b7cf2..0000000 --- a/docs/files/src_pixi_Text.js.html +++ /dev/null @@ -1,292 +0,0 @@ - - - - - src/pixi/Text.js - Pixi.JS - - - - - - - - -
    -
    -
    - -

    - -
    -
    - API Docs for: 1.0.0 -
    -
    -
    - -
    - -
    -
    -
    - Show: - - - - - - - -
    - - -
    -
    -
    -

    File: src/pixi/Text.js

    - -
    - 
    -/**
- * @author Mat Groves http://matgroves.com/ @Doormat23
- */
-
-/**
- * A Text Object will create a line of text
- * @class Text
- * @extends Sprite
- * @constructor
- * @param text {String} The copy that you would like the text to display
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.canvas = document.createElement("canvas");
-	
-	this.context = this.canvas.getContext("2d");
-	//document.body.appendChild(this.canvas);
-	this.setText(text);
-	this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness);
-	
-	this.updateText();
-	
-	PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas));
-	
-	// need to store a canvas that can
-}
-
-// constructor
-PIXI.Text.constructor = PIXI.Text;
-PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype );
-
-/**
- * Set the copy for the text object
- * @methos setText
- * @param text {String} The copy that you would like the text to display
- */
-PIXI.Text.prototype.setText = function(text)
-{
-	this.text = text || " ";
-	this.dirty = true;
-}
-
-/**
- * Set the style of the text
- * @method setStyle
- * @constructor
- * @param fontStyle {String} the style and size of the font eg "bold 20px Arial"
- * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null
- * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null
- * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke)
- */
-PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness)
-{
-	this.fontStyle = fontStyle || "bold 20pt Arial";
-	this.fillStyle = fillStyle;
-	this.strokeStyle = strokeStyle;
-	this.strokeThickness = strokeThickness || 0;
-	
-	this.dirty = true;
-}
-
-/**
- * @private
- */
-PIXI.Text.prototype.updateText = function()
-{
-//	console.log(this.text);
-	this.context.font = this.fontStyle;
-		
-	this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width;
-	this.canvas.height = this.determineFontHeight("font: " + this.fontStyle  + ";")+ this.strokeThickness;// textDimensions.height;
-
-	this.context.fillStyle = this.fillStyle;
-	this.context.font = this.fontStyle;
-	
-    this.context.strokeStyle = this.strokeStyle;
-	this.context.lineWidth = this.strokeThickness;
-
-	this.context.textBaseline="top"; 
-
-    if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	if(this.fillStyle)this.context.fillText(this.text,  this.strokeThickness/2, this.strokeThickness/2);
-	
-	
-//	console.log("//")
-}
-
-PIXI.Text.prototype.updateTransform = function()
-{
-	if(this.dirty)
-	{
-		this.updateText();	
-		
-		// update the texture..
-		this.texture.baseTexture.width = this.canvas.width;
-		this.texture.baseTexture.height = this.canvas.height;
-		this.texture.frame.width = this.canvas.width;
-		this.texture.frame.height = this.canvas.height;
-		
-		PIXI.texturesToUpdate.push(this.texture.baseTexture);
-		this.dirty = false;
-	}
-	
-	PIXI.Sprite.prototype.updateTransform.call( this );
-}
-
-/*
- * http://stackoverflow.com/users/34441/ellisbben
- * great solution to the problem!
- */
-PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
-{
-	// build a little refference dictionary so if the font style has been used return a
-	// cached version...
-	var result = PIXI.Text.heightCache[fontStyle]
-	
-	if(!result)
-	{
-		var body = document.getElementsByTagName("body")[0];
-		var dummy = document.createElement("div");
-		var dummyText = document.createTextNode("M");
-		dummy.appendChild(dummyText);
-		dummy.setAttribute("style", fontStyle);
-		body.appendChild(dummy);
-		
-		result = dummy.offsetHeight;
-		PIXI.Text.heightCache[fontStyle] = result
-		
-		body.removeChild(dummy);
-	}
-	
-	return result;
-};
-
-PIXI.Text.prototype.destroy = function(destroyTexture)
-{
-	if(destroyTexture)
-	{
-		this.texture.destroy();
-	}
-		
-}
-
-PIXI.Text.heightCache = {};
-
-
    -
    - -
    -
    -
    -
    -
    -
    - - - - - - - - - - diff --git a/docs/files/src_pixi_extras_Rope.js.html b/docs/files/src_pixi_extras_Rope.js.html index 7e2ceff..219f049 100644 --- a/docs/files/src_pixi_extras_Rope.js.html +++ b/docs/files/src_pixi_extras_Rope.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_Strip.js.html b/docs/files/src_pixi_extras_Strip.js.html index 8f748c2..a7a64cd 100644 --- a/docs/files/src_pixi_extras_Strip.js.html +++ b/docs/files/src_pixi_extras_Strip.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_extras_TilingSprite.js.html b/docs/files/src_pixi_extras_TilingSprite.js.html index af3d84d..b61c15f 100644 --- a/docs/files/src_pixi_extras_TilingSprite.js.html +++ b/docs/files/src_pixi_extras_TilingSprite.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_loaders_AssetLoader.js.html b/docs/files/src_pixi_loaders_AssetLoader.js.html index 089d5cf..594481e 100644 --- a/docs/files/src_pixi_loaders_AssetLoader.js.html +++ b/docs/files/src_pixi_loaders_AssetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -127,17 +133,17 @@ */ /** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -145,11 +151,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -169,105 +183,45 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; diff --git a/docs/files/src_pixi_loaders_BitmapFontLoader.js.html b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html new file mode 100644 index 0000000..6fd5d80 --- /dev/null +++ b/docs/files/src_pixi_loaders_BitmapFontLoader.js.html @@ -0,0 +1,275 @@ + + + + + src/pixi/loaders/BitmapFontLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/BitmapFontLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The xml loader is used to load in XML bitmap font data ("xml" or "fnt")
+ * To generate the data you can use http://www.angelcode.com/products/bmfont/
+ * This loader will also load the image file as the data.
+ * When loaded this class will dispatch a "loaded" event
+ * @class BitmapFontLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url the url of the sprite sheet JSON file
+ * @param {Boolean} crossorigin
+ */
+
+PIXI.BitmapFontLoader = function(url, crossorigin)
+{
+    /*
+     * i use texture packer to load the assets..
+     * http://www.codeandweb.com/texturepacker
+     * make sure to set the format as "JSON"
+     */
+    PIXI.EventTarget.call(this);
+    this.url = url;
+    this.baseUrl = url.replace(/[^\/]*$/, "");
+    this.texture = null;
+    this.crossorigin = crossorigin;
+};
+
+// constructor
+PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader;
+
+/**
+ * This will begin loading the JSON file
+ */
+PIXI.BitmapFontLoader.prototype.load = function()
+{
+    this.ajaxRequest = new XMLHttpRequest();
+    var scope = this;
+    this.ajaxRequest.onreadystatechange = function()
+    {
+        scope.onXMLLoaded();
+    };
+
+    this.ajaxRequest.open("GET", this.url, true);
+    if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml");
+    this.ajaxRequest.send(null)
+};
+
+/**
+ * Invoked when XML file is loaded
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onXMLLoaded = function()
+{
+    if (this.ajaxRequest.readyState == 4)
+    {
+        if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1)
+        {
+            var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue;
+            var image = new PIXI.ImageLoader(textureUrl, this.crossorigin);
+            this.texture = image.texture.baseTexture;
+
+            var data = {};
+            var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0];
+            var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0];
+            data.font = info.attributes.getNamedItem("face").nodeValue;
+            data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10);
+            data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10);
+            data.chars = {};
+
+            //parse letters
+            var letters = this.ajaxRequest.responseXML.getElementsByTagName("char");
+
+            for (var i = 0; i < letters.length; i++)
+            {
+                var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10);
+
+                var textureRect = {
+                    x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10),
+                    y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10),
+                    width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10),
+                    height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10)
+                };
+                PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect);
+
+                data.chars[charCode] = {
+                    xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10),
+                    yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10),
+                    xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10),
+                    kerning: {}
+                };
+            }
+
+            //parse kernings
+            var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning");
+            for (i = 0; i < kernings.length; i++)
+            {
+               var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10);
+               var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10);
+               var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10);
+
+                data.chars[second].kerning[first] = amount;
+
+            }
+            PIXI.BitmapText.fonts[data.font] = data;
+
+            var scope = this;
+            image.addEventListener("loaded", function() {
+                scope.onLoaded();
+            });
+            image.load();
+        }
+    }
+};
+
+/**
+ * Invoked when all files are loaded (xml/fnt and texture)
+ * @private
+ */
+PIXI.BitmapFontLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_ImageLoader.js.html b/docs/files/src_pixi_loaders_ImageLoader.js.html new file mode 100644 index 0000000..f6fcf07 --- /dev/null +++ b/docs/files/src_pixi_loaders_ImageLoader.js.html @@ -0,0 +1,200 @@ + + + + + src/pixi/loaders/ImageLoader.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/loaders/ImageLoader.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif")
+ * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId()
+ * When loaded this class will dispatch a 'loaded' event
+ * @class ImageLoader
+ * @extends EventTarget
+ * @constructor
+ * @param {String} url The url of the image
+ * @param {Boolean} crossorigin
+ */
+PIXI.ImageLoader = function(url, crossorigin)
+{
+    PIXI.EventTarget.call(this);
+    this.texture = PIXI.Texture.fromImage(url, crossorigin);
+};
+
+// constructor
+PIXI.ImageLoader.constructor = PIXI.ImageLoader;
+
+/**
+ * Loads image or takes it from cache
+ */
+PIXI.ImageLoader.prototype.load = function()
+{
+    if(!this.texture.baseTexture.hasLoaded)
+    {
+        var scope = this;
+        this.texture.baseTexture.addEventListener("loaded", function()
+        {
+            scope.onLoaded();
+        });
+    }
+    else
+    {
+        this.onLoaded();
+    }
+};
+
+/**
+ * Invoked when image file is loaded or it is already cached and ready to use
+ * @private
+ */
+PIXI.ImageLoader.prototype.onLoaded = function()
+{
+    this.dispatchEvent({type: "loaded", content: this});
+};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 5510866..3b14d2f 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -130,30 +136,31 @@ * The sprite sheet loader is used to load in JSON sprite sheet data * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event + * When loaded this class will dispatch a "loaded" event * @class SpriteSheetLoader * @extends EventTarget * @constructor - * @param url {String} the url of the sprite sheet JSON file + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin */ -PIXI.SpriteSheetLoader = function(url) +PIXI.SpriteSheetLoader = function(url, crossorigin) { /* * i use texture packer to load the assets.. * http://www.codeandweb.com/texturepacker * make sure to set the format as "JSON" */ - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; this.frames = {}; - this.crossorigin = false; -} + this.crossorigin = crossorigin; +}; // constructor PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; @@ -165,32 +172,38 @@ { this.ajaxRequest = new AjaxRequest(); var scope = this; - this.ajaxRequest.onreadystatechange=function() + this.ajaxRequest.onreadystatechange = function() { - scope.onLoaded(); - } + scope.onJSONLoaded(); + }; - this.ajaxRequest.open("GET", this.url, true) + this.ajaxRequest.open("GET", this.url, true); if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); this.ajaxRequest.send(null) -} +}; -PIXI.SpriteSheetLoader.prototype.onLoaded = function() +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() { - if (this.ajaxRequest.readyState==4) + if (this.ajaxRequest.readyState == 4) { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) { var rect = frameData[i].frame; if (rect) @@ -201,32 +214,24 @@ { //var realSize = frameData[i].spriteSourceSize; PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + PIXI.TextureCache[i].trim.x = 0;// (realSize.x / rect.w) // calculate the offset! } - // this.frames[i] = ; } } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; diff --git a/docs/files/src_pixi_renderers_CanvasRenderer.js.html b/docs/files/src_pixi_renderers_CanvasRenderer.js.html index 5598bbd..0b91b46 100644 --- a/docs/files/src_pixi_renderers_CanvasRenderer.js.html +++ b/docs/files/src_pixi_renderers_CanvasRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLBatch.js.html b/docs/files/src_pixi_renderers_WebGLBatch.js.html index 17824ca..95b86b5 100644 --- a/docs/files/src_pixi_renderers_WebGLBatch.js.html +++ b/docs/files/src_pixi_renderers_WebGLBatch.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 0a39149..af0ce9f 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_renderers_WebGLShaders.js.html b/docs/files/src_pixi_renderers_WebGLShaders.js.html index 40ac3bd..bb52ff9 100644 --- a/docs/files/src_pixi_renderers_WebGLShaders.js.html +++ b/docs/files/src_pixi_renderers_WebGLShaders.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_text_BitmapText.js.html b/docs/files/src_pixi_text_BitmapText.js.html new file mode 100644 index 0000000..9fdae27 --- /dev/null +++ b/docs/files/src_pixi_text_BitmapText.js.html @@ -0,0 +1,306 @@ + + + + + src/pixi/text/BitmapText.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/BitmapText.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text using bitmap font 
+ * You can generate the fnt files using 
+ * http://www.angelcode.com/products/bmfont/ for windows of
+ * http://www.bmglyph.com/ for mac.
+ * @class BitmapText
+ * @extends DisplayObjectContainer
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously)
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+ //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font
+PIXI.BitmapText = function(text, style)
+{
+    PIXI.DisplayObjectContainer.call(this);
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false
+
+};
+
+// constructor
+PIXI.BitmapText.constructor = PIXI.BitmapText;
+PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype);
+
+/**
+ * Set the copy for the text object
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.BitmapText.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ */
+PIXI.BitmapText.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.align = style.align || "left";
+    this.style = style;
+
+    var font = style.font.split(" ");
+    this.fontName = font[font.length - 1];
+    this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size;
+
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.BitmapText.prototype.updateText = function()
+{
+    var data = PIXI.BitmapText.fonts[this.fontName];
+    var pos = new PIXI.Point();
+    var prevCharCode = null;
+    var chars = [];
+    var maxLineWidth = 0;
+    var lineWidths = [];
+    var line = 0;
+    var scale = this.fontSize / data.size;
+    for(var i = 0; i < this.text.length; i++)
+    {
+        var charCode = this.text.charCodeAt(i);
+        if(charCode == "\n".charCodeAt(0))
+        {
+            lineWidths.push(pos.x);
+            maxLineWidth = Math.max(maxLineWidth, pos.x);
+            line++;
+
+            pos.x = 0;
+            pos.y += data.lineHeight;
+            prevCharCode = null;
+            continue;
+        }
+        
+        var charData = data.chars[charCode];
+        if(!charData) continue;
+
+        if(prevCharCode && charData[prevCharCode])
+        {
+           pos.x += charData.kerning[prevCharCode];
+        }
+        chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)});
+        pos.x += charData.xAdvance;
+
+        prevCharCode = charCode;
+    }
+
+    lineWidths.push(pos.x);
+    maxLineWidth = Math.max(maxLineWidth, pos.x);
+
+    var lineAlignOffsets = [];
+    for(i = 0; i <= line; i++)
+    {
+        var alignOffset = 0;
+        if(this.style.align == "right")
+        {
+            alignOffset = maxLineWidth - lineWidths[i];
+        }
+        else if(this.style.align == "center")
+        {
+            alignOffset = (maxLineWidth - lineWidths[i]) / 2;
+        }
+        lineAlignOffsets.push(alignOffset);
+    }
+
+    for(i = 0; i < chars.length; i++)
+    {
+        var char = PIXI.Sprite.fromFrame(chars[i].charCode);
+        char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale;
+        char.position.y = chars[i].position.y * scale;
+        char.scale.x = char.scale.y = scale;
+        this.addChild(char);
+    }
+
+    this.width = pos.x * scale;
+    this.height = (pos.y + data.lineHeight) * scale;
+};
+
+/**
+ * @private
+ */
+PIXI.BitmapText.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+        while(this.children.length > 0)
+        {
+            this.removeChild(this.getChildAt(0));
+        }
+        this.updateText();
+
+        this.dirty = false;
+	}
+	
+	PIXI.DisplayObjectContainer.prototype.updateTransform.call(this);
+};
+
+PIXI.BitmapText.fonts = {};
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_text_Text.js.html b/docs/files/src_pixi_text_Text.js.html new file mode 100644 index 0000000..7933074 --- /dev/null +++ b/docs/files/src_pixi_text_Text.js.html @@ -0,0 +1,344 @@ + + + + + src/pixi/text/Text.js - Pixi.JS + + + + + + + + +
    +
    +
    + +

    + +
    +
    + API Docs for: 1.0.0 +
    +
    +
    + +
    + +
    +
    +
    + Show: + + + + + + + +
    + + +
    +
    +
    +

    File: src/pixi/text/Text.js

    + +
    + 
    +/**
+ * @author Mat Groves http://matgroves.com/ @Doormat23
+ */
+
+/**
+ * A Text Object will create a line(s) of text to split a line you can use "\n"
+ * @class Text
+ * @extends Sprite
+ * @constructor
+ * @param {String} text The copy that you would like the text to display
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text = function(text, style)
+{
+    this.canvas = document.createElement("canvas");
+    this.context = this.canvas.getContext("2d");
+    PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas));
+
+    this.setText(text);
+    this.setStyle(style);
+    this.updateText();
+    this.dirty = false;
+};
+
+// constructor
+PIXI.Text.constructor = PIXI.Text;
+PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype);
+
+/**
+ * Set the style of the text
+ * @method setStyle
+ * @param {Object} [style] The style parameters
+ * @param {String} [style.font="bold 20pt Arial"] The style and size of the font
+ * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00"
+ * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right")
+ * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00"
+ * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke)
+ */
+PIXI.Text.prototype.setStyle = function(style)
+{
+    style = style || {};
+    style.font = style.font || "bold 20pt Arial";
+    style.fill = style.fill || "black";
+    style.align = style.align || "left";
+    style.strokeThickness = style.strokeThickness || 0;
+    this.style = style;
+    this.dirty = true;
+};
+
+/**
+ * Set the copy for the text object. To split a line you can use "\n"
+ * @methos setText
+ * @param {String} text The copy that you would like the text to display
+ */
+PIXI.Sprite.prototype.setText = function(text)
+{
+    this.text = text || " ";
+    this.dirty = true;
+};
+
+/**
+ * Renders text
+ * @private
+ */
+PIXI.Text.prototype.updateText = function()
+{
+	this.context.font = this.style.font;
+
+	//split text into lines
+	var lines = this.text.split("\n");
+
+	//calculate text width
+	var lineWidths = [];
+	var maxLineWidth = 0;
+	for (var i = 0; i < lines.length; i++)
+	{
+		var lineWidth = this.context.measureText(lines[i]).width;
+		lineWidths[i] = lineWidth;
+		maxLineWidth = Math.max(maxLineWidth, lineWidth);
+	}
+	this.canvas.width = maxLineWidth + this.style.strokeThickness;
+	
+	//calculate text height
+	var lineHeight = this.determineFontHeight("font: " + this.style.font  + ";") + this.style.strokeThickness;
+	this.canvas.height = lineHeight * lines.length;
+
+	//set canvas text styles
+	this.context.fillStyle = this.style.fill;
+	this.context.font = this.style.font;
+	
+	this.context.strokeStyle = this.style.stroke;
+	this.context.lineWidth = this.style.strokeThickness;
+
+	this.context.textBaseline = "top";
+
+	//draw lines line by line
+	for (i = 0; i < lines.length; i++)
+	{
+		var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight);
+	
+		if(this.style.align == "right")
+		{
+			linePosition.x += maxLineWidth - lineWidths[i];
+		}
+		else if(this.style.align == "center")
+		{
+			linePosition.x += (maxLineWidth - lineWidths[i]) / 2;
+		}
+
+		if(this.style.stroke && this.style.strokeThickness)
+		{
+			this.context.strokeText(lines[i], linePosition.x, linePosition.y);
+		}
+
+		if(this.style.fill)
+		{
+			this.context.fillText(lines[i], linePosition.x, linePosition.y);
+		}
+	}
+	
+    this.updateTexture();
+};
+
+/**
+ * Updates texture size based on canvas size
+ * @private
+ */
+PIXI.Text.prototype.updateTexture = function()
+{
+
+    this.texture.baseTexture.width = this.canvas.width;
+    this.texture.baseTexture.height = this.canvas.height;
+    this.texture.frame.width = this.canvas.width;
+    this.texture.frame.height = this.canvas.height;
+    PIXI.texturesToUpdate.push(this.texture.baseTexture);
+};
+
+/**
+ * @private
+ */
+PIXI.Text.prototype.updateTransform = function()
+{
+	if(this.dirty)
+	{
+		this.updateText();	
+		this.dirty = false;
+	}
+	
+	PIXI.Sprite.prototype.updateTransform.call(this);
+};
+
+/*
+ * http://stackoverflow.com/users/34441/ellisbben
+ * great solution to the problem!
+ */
+PIXI.Text.prototype.determineFontHeight = function(fontStyle) 
+{
+	// build a little reference dictionary so if the font style has been used return a
+	// cached version...
+	var result = PIXI.Text.heightCache[fontStyle];
+	
+	if(!result)
+	{
+		var body = document.getElementsByTagName("body")[0];
+		var dummy = document.createElement("div");
+		var dummyText = document.createTextNode("M");
+		dummy.appendChild(dummyText);
+		dummy.setAttribute("style", fontStyle);
+		body.appendChild(dummy);
+		
+		result = dummy.offsetHeight;
+		PIXI.Text.heightCache[fontStyle] = result;
+		
+		body.removeChild(dummy);
+	}
+	
+	return result;
+};
+
+PIXI.Text.prototype.destroy = function(destroyTexture)
+{
+	if(destroyTexture)
+	{
+		this.texture.destroy();
+	}
+		
+};
+
+PIXI.Text.heightCache = {};
+
+
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + diff --git a/docs/files/src_pixi_textures_BaseTexture.js.html b/docs/files/src_pixi_textures_BaseTexture.js.html index a7d8f96..31917f0 100644 --- a/docs/files/src_pixi_textures_BaseTexture.js.html +++ b/docs/files/src_pixi_textures_BaseTexture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_textures_Texture.js.html b/docs/files/src_pixi_textures_Texture.js.html index 35f12dc..ca52cac 100644 --- a/docs/files/src_pixi_textures_Texture.js.html +++ b/docs/files/src_pixi_textures_Texture.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_Detector.js.html b/docs/files/src_pixi_utils_Detector.js.html index 6b7d031..62cc770 100644 --- a/docs/files/src_pixi_utils_Detector.js.html +++ b/docs/files/src_pixi_utils_Detector.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_EventTarget.js.html b/docs/files/src_pixi_utils_EventTarget.js.html index 929e6eb..7a794c3 100644 --- a/docs/files/src_pixi_utils_EventTarget.js.html +++ b/docs/files/src_pixi_utils_EventTarget.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/files/src_pixi_utils_Utils.js.html b/docs/files/src_pixi_utils_Utils.js.html index c6b3b43..e46f12a 100644 --- a/docs/files/src_pixi_utils_Utils.js.html +++ b/docs/files/src_pixi_utils_Utils.js.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/index.html b/docs/index.html index 36c00da..f277aae 100644 --- a/docs/index.html +++ b/docs/index.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • diff --git a/docs/modules/PIXI.html b/docs/modules/PIXI.html index 3cf7051..d3a42e3 100644 --- a/docs/modules/PIXI.html +++ b/docs/modules/PIXI.html @@ -45,12 +45,18 @@
  • BaseTexture
    • +
  • BitmapFontLoader
    • + +
  • BitmapText
    • +
  • CanvasRenderer
  • DisplayObject
  • DisplayObjectContainer
    • +
  • ImageLoader
    • +
  • InteractionData
  • InteractionManager
    • @@ -126,7 +132,7 @@
    - Defined in: src/pixi/Text.js:5 + Defined in: src/pixi/Stage.js:5
    @@ -161,6 +167,18 @@
  • + + BitmapFontLoader + +
    • + +
  • + + BitmapText + +
    • + +
  • CanvasRenderer @@ -179,6 +197,12 @@
  • + + ImageLoader + +
    • + +
  • InteractionData diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 10 - Text/pixi.js b/examples/example 10 - Text/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 10 - Text/pixi.js +++ b/examples/example 10 - Text/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 2 - SpriteSheet/pixi.js b/examples/example 2 - SpriteSheet/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 2 - SpriteSheet/pixi.js +++ b/examples/example 2 - SpriteSheet/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 3 - MovieClip/pixi.js b/examples/example 3 - MovieClip/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 3 - MovieClip/pixi.js +++ b/examples/example 3 - MovieClip/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 4 - Balls/pixi.js b/examples/example 4 - Balls/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 4 - Balls/pixi.js +++ b/examples/example 4 - Balls/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 5 - Morph/pixi.js b/examples/example 5 - Morph/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 5 - Morph/pixi.js +++ b/examples/example 5 - Morph/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 6 - Interactivity/pixi.js b/examples/example 6 - Interactivity/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 6 - Interactivity/pixi.js +++ b/examples/example 6 - Interactivity/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 7 - Transparent Background/pixi.js b/examples/example 7 - Transparent Background/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 7 - Transparent Background/pixi.js +++ b/examples/example 7 - Transparent Background/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 8 - Dragging/pixi.js b/examples/example 8 - Dragging/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 8 - Dragging/pixi.js +++ b/examples/example 8 - Dragging/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/examples/example 9 - Tiling Texture/pixi.js b/examples/example 9 - Tiling Texture/pixi.js index 78c6bae..6063585 100644 --- a/examples/example 9 - Tiling Texture/pixi.js +++ b/examples/example 9 - Tiling Texture/pixi.js @@ -4,11 +4,19 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-05-01 + * Compiled: 2013-05-06 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +(function(){ + + var root = this; + /** * @author Mat Groves http://matgroves.com/ @Doormat23 */ @@ -839,110 +847,156 @@ */ /** - * A Text Object will create a line of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor - * @param text {String} The copy that you would like the text to display - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text = function(text, fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text = function(text, style) { - this.canvas = document.createElement("canvas"); - - this.context = this.canvas.getContext("2d"); - //document.body.appendChild(this.canvas); - this.setText(text); - this.setStyle(fontStyle, fillStyle, strokeStyle, strokeThickness); - - this.updateText(); - - PIXI.Sprite.call( this, PIXI.Texture.fromCanvas(this.canvas)); - - // need to store a canvas that can -} + this.canvas = document.createElement("canvas"); + this.context = this.canvas.getContext("2d"); + PIXI.Sprite.call(this, PIXI.Texture.fromCanvas(this.canvas)); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false; +}; // constructor PIXI.Text.constructor = PIXI.Text; -PIXI.Text.prototype = Object.create( PIXI.Sprite.prototype ); - -/** - * Set the copy for the text object - * @methos setText - * @param text {String} The copy that you would like the text to display - */ -PIXI.Text.prototype.setText = function(text) -{ - this.text = text || " "; - this.dirty = true; -} +PIXI.Text.prototype = Object.create(PIXI.Sprite.prototype); /** * Set the style of the text * @method setStyle - * @constructor - * @param fontStyle {String} the style and size of the font eg "bold 20px Arial" - * @param fillStyle {Object} a canvas fillstyle that will be used on the text eg "red", "#00FF00" can also be null - * @param strokeStyle {String} a canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" can also be null - * @param strokeThickness {Number} A number that represents the thicknes of the stroke. default is 0 (no stroke) + * @param {Object} [style] The style parameters + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font + * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" + * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ -PIXI.Text.prototype.setStyle = function(fontStyle, fillStyle, strokeStyle, strokeThickness) +PIXI.Text.prototype.setStyle = function(style) { - this.fontStyle = fontStyle || "bold 20pt Arial"; - this.fillStyle = fillStyle; - this.strokeStyle = strokeStyle; - this.strokeThickness = strokeThickness || 0; - - this.dirty = true; -} + style = style || {}; + style.font = style.font || "bold 20pt Arial"; + style.fill = style.fill || "black"; + style.align = style.align || "left"; + style.strokeThickness = style.strokeThickness || 0; + this.style = style; + this.dirty = true; +}; /** + * Set the copy for the text object. To split a line you can use "\n" + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.Sprite.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Renders text * @private */ PIXI.Text.prototype.updateText = function() { -// console.log(this.text); - this.context.font = this.fontStyle; - - this.canvas.width = this.context.measureText(this.text).width + this.strokeThickness//textDimensions.width; - this.canvas.height = this.determineFontHeight("font: " + this.fontStyle + ";")+ this.strokeThickness;// textDimensions.height; + this.context.font = this.style.font; - this.context.fillStyle = this.fillStyle; - this.context.font = this.fontStyle; + //split text into lines + var lines = this.text.split("\n"); + + //calculate text width + var lineWidths = []; + var maxLineWidth = 0; + for (var i = 0; i < lines.length; i++) + { + var lineWidth = this.context.measureText(lines[i]).width; + lineWidths[i] = lineWidth; + maxLineWidth = Math.max(maxLineWidth, lineWidth); + } + this.canvas.width = maxLineWidth + this.style.strokeThickness; - this.context.strokeStyle = this.strokeStyle; - this.context.lineWidth = this.strokeThickness; + //calculate text height + var lineHeight = this.determineFontHeight("font: " + this.style.font + ";") + this.style.strokeThickness; + this.canvas.height = lineHeight * lines.length; - this.context.textBaseline="top"; - - if(this.strokeStyle && this.strokeThickness)this.context.strokeText(this.text, this.strokeThickness/2, this.strokeThickness/2); - if(this.fillStyle)this.context.fillText(this.text, this.strokeThickness/2, this.strokeThickness/2); + //set canvas text styles + this.context.fillStyle = this.style.fill; + this.context.font = this.style.font; - -// console.log("//") -} + this.context.strokeStyle = this.style.stroke; + this.context.lineWidth = this.style.strokeThickness; + this.context.textBaseline = "top"; + + //draw lines line by line + for (i = 0; i < lines.length; i++) + { + var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + + if(this.style.align == "right") + { + linePosition.x += maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + linePosition.x += (maxLineWidth - lineWidths[i]) / 2; + } + + if(this.style.stroke && this.style.strokeThickness) + { + this.context.strokeText(lines[i], linePosition.x, linePosition.y); + } + + if(this.style.fill) + { + this.context.fillText(lines[i], linePosition.x, linePosition.y); + } + } + + this.updateTexture(); +}; + +/** + * Updates texture size based on canvas size + * @private + */ +PIXI.Text.prototype.updateTexture = function() +{ + + this.texture.baseTexture.width = this.canvas.width; + this.texture.baseTexture.height = this.canvas.height; + this.texture.frame.width = this.canvas.width; + this.texture.frame.height = this.canvas.height; + PIXI.texturesToUpdate.push(this.texture.baseTexture); +}; + +/** + * @private + */ PIXI.Text.prototype.updateTransform = function() { if(this.dirty) { this.updateText(); - - // update the texture.. - this.texture.baseTexture.width = this.canvas.width; - this.texture.baseTexture.height = this.canvas.height; - this.texture.frame.width = this.canvas.width; - this.texture.frame.height = this.canvas.height; - - PIXI.texturesToUpdate.push(this.texture.baseTexture); this.dirty = false; } - PIXI.Sprite.prototype.updateTransform.call( this ); -} + PIXI.Sprite.prototype.updateTransform.call(this); +}; /* * http://stackoverflow.com/users/34441/ellisbben @@ -950,9 +1004,9 @@ */ PIXI.Text.prototype.determineFontHeight = function(fontStyle) { - // build a little refference dictionary so if the font style has been used return a + // build a little reference dictionary so if the font style has been used return a // cached version... - var result = PIXI.Text.heightCache[fontStyle] + var result = PIXI.Text.heightCache[fontStyle]; if(!result) { @@ -964,7 +1018,7 @@ body.appendChild(dummy); result = dummy.offsetHeight; - PIXI.Text.heightCache[fontStyle] = result + PIXI.Text.heightCache[fontStyle] = result; body.removeChild(dummy); } @@ -979,7 +1033,7 @@ this.texture.destroy(); } -} +}; PIXI.Text.heightCache = {}; @@ -987,6 +1041,163 @@ * @author Mat Groves http://matgroves.com/ @Doormat23 */ +/** + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer + * @constructor + * @param {String} text The copy that you would like the text to display + * @param {Object} [style] The style parameters + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font +PIXI.BitmapText = function(text, style) +{ + PIXI.DisplayObjectContainer.call(this); + + this.setText(text); + this.setStyle(style); + this.updateText(); + this.dirty = false + +}; + +// constructor +PIXI.BitmapText.constructor = PIXI.BitmapText; +PIXI.BitmapText.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); + +/** + * Set the copy for the text object + * @methos setText + * @param {String} text The copy that you would like the text to display + */ +PIXI.BitmapText.prototype.setText = function(text) +{ + this.text = text || " "; + this.dirty = true; +}; + +/** + * Set the style of the text + * @method setStyle + * @param {Object} [style] The style parameters + * @param {Object} style.font The style and size of the font. If font size is not specified, it uses default bitmap font size. Font name is required + * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") + */ +PIXI.BitmapText.prototype.setStyle = function(style) +{ + style = style || {}; + style.align = style.align || "left"; + this.style = style; + + var font = style.font.split(" "); + this.fontName = font[font.length - 1]; + this.fontSize = font.length >= 2 ? parseInt(font[font.length - 2], 10) : PIXI.BitmapText.fonts[this.fontName].size; + + this.dirty = true; +}; + +/** + * Renders text + * @private + */ +PIXI.BitmapText.prototype.updateText = function() +{ + var data = PIXI.BitmapText.fonts[this.fontName]; + var pos = new PIXI.Point(); + var prevCharCode = null; + var chars = []; + var maxLineWidth = 0; + var lineWidths = []; + var line = 0; + var scale = this.fontSize / data.size; + for(var i = 0; i < this.text.length; i++) + { + var charCode = this.text.charCodeAt(i); + if(charCode == "\n".charCodeAt(0)) + { + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + line++; + + pos.x = 0; + pos.y += data.lineHeight; + prevCharCode = null; + continue; + } + + var charData = data.chars[charCode]; + if(!charData) continue; + + if(prevCharCode && charData[prevCharCode]) + { + pos.x += charData.kerning[prevCharCode]; + } + chars.push({line: line, charCode: charCode, position: new PIXI.Point(pos.x + charData.xOffset, pos.y + charData.yOffset)}); + pos.x += charData.xAdvance; + + prevCharCode = charCode; + } + + lineWidths.push(pos.x); + maxLineWidth = Math.max(maxLineWidth, pos.x); + + var lineAlignOffsets = []; + for(i = 0; i <= line; i++) + { + var alignOffset = 0; + if(this.style.align == "right") + { + alignOffset = maxLineWidth - lineWidths[i]; + } + else if(this.style.align == "center") + { + alignOffset = (maxLineWidth - lineWidths[i]) / 2; + } + lineAlignOffsets.push(alignOffset); + } + + for(i = 0; i < chars.length; i++) + { + var char = PIXI.Sprite.fromFrame(chars[i].charCode); + char.position.x = (chars[i].position.x + lineAlignOffsets[chars[i].line]) * scale; + char.position.y = chars[i].position.y * scale; + char.scale.x = char.scale.y = scale; + this.addChild(char); + } + + this.width = pos.x * scale; + this.height = (pos.y + data.lineHeight) * scale; +}; + +/** + * @private + */ +PIXI.BitmapText.prototype.updateTransform = function() +{ + if(this.dirty) + { + while(this.children.length > 0) + { + this.removeChild(this.getChildAt(0)); + } + this.updateText(); + + this.dirty = false; + } + + PIXI.DisplayObjectContainer.prototype.updateTransform.call(this); +}; + +PIXI.BitmapText.fonts = {}; +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + /** @@ -4547,123 +4758,17 @@ */ /** - * The sprite sheet loader is used to load in JSON sprite sheet data - * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format - * There is a free version so thats nice, although the paid version is great value for money. - * It is highly recommended to use Sprite sheets (also know as texture atlas') as it means sprite's can be batched and drawn together for highly increased rendering speed. - * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() - * This loader will also load the image file that the Spritesheet points to as well as the data. - * When loaded this class will dispatch a 'loaded' event - * @class SpriteSheetLoader - * @extends EventTarget - * @constructor - * @param url {String} the url of the sprite sheet JSON file - */ - -PIXI.SpriteSheetLoader = function(url) -{ - /* - * i use texture packer to load the assets.. - * http://www.codeandweb.com/texturepacker - * make sure to set the format as "JSON" - */ - PIXI.EventTarget.call( this ); - this.url = url; - this.baseUrl = url.replace(/[^\/]*$/, ''); - this.texture; - this.frames = {}; - this.crossorigin = false; -} - -// constructor -PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; - -/** - * This will begin loading the JSON file - */ -PIXI.SpriteSheetLoader.prototype.load = function() -{ - this.ajaxRequest = new AjaxRequest(); - var scope = this; - this.ajaxRequest.onreadystatechange=function() - { - scope.onLoaded(); - } - - this.ajaxRequest.open("GET", this.url, true) - if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); - this.ajaxRequest.send(null) -} - -PIXI.SpriteSheetLoader.prototype.onLoaded = function() -{ - if (this.ajaxRequest.readyState==4) - { - if (this.ajaxRequest.status==200 || window.location.href.indexOf("http")==-1) - { - var jsondata = eval("("+this.ajaxRequest.responseText+")"); - - var textureUrl = this.baseUrl + jsondata.meta.image; - - this.texture = PIXI.Texture.fromImage(textureUrl, this.crossorigin).baseTexture; - - // if(!this.texture)this.texture = new PIXI.Texture(textureUrl); - - var frameData = jsondata.frames; - for (var i in frameData) - { - var rect = frameData[i].frame; - if (rect) - { - 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] = ; - } - } - - if(this.texture.hasLoaded) - { - this.dispatchEvent( { type: 'loaded', content: this } ); - } - else - { - var scope = this; - // wait for the texture to load.. - this.texture.addEventListener('loaded', function(){ - - scope.dispatchEvent( { type: 'loaded', content: scope } ); - - }); - } - } - } - -} - - -/** - * @author Mat Groves http://matgroves.com/ @Doormat23 - */ - -/** - * A Class that loads a bunch of images / sprite sheet files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromFrame(), PIXI.Texture.fromImage() and PIXI.Sprite.fromImage(), PIXI.Sprite.fromFromeId() - * When all items have been loaded this class will dispatch a 'loaded' event - * As each individual item is loaded this class will dispatch a 'progress' event + * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the assets have been loaded they are added to the PIXI Texture cache and can be accessed easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage() + * When all items have been loaded this class will dispatch a "onLoaded" event + * As each individual item is loaded this class will dispatch a "onProgress" event * @class AssetLoader * @constructor * @extends EventTarget - * @param assetURLs {Array} an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time + * @param {Array} assetURLs an array of image/sprite sheet urls that you would like loaded supported. Supported image formats include "jpeg", "jpg", "png", "gif". Supported sprite sheet data formats only include "JSON" at this time. Supported bitmap font data formats include "xml" and "fnt". */ PIXI.AssetLoader = function(assetURLs) { - PIXI.EventTarget.call( this ); + PIXI.EventTarget.call(this); /** * The array of asset URLs that are going to be loaded @@ -4671,11 +4776,19 @@ * @type Array */ this.assetURLs = assetURLs; - - this.assets = []; this.crossorigin = false; -} + + this.loadersByType = { + "jpg": PIXI.ImageLoader, + "jpeg": PIXI.ImageLoader, + "png": PIXI.ImageLoader, + "gif": PIXI.ImageLoader, + "json": PIXI.SpriteSheetLoader, + "xml": PIXI.BitmapFontLoader, + "fnt": PIXI.BitmapFontLoader + }; +}; /** Fired when an item has loaded @@ -4695,103 +4808,341 @@ */ PIXI.AssetLoader.prototype.load = function() { - this.loadCount = this.assetURLs.length; - var imageTypes = ["jpeg", "jpg", "png", "gif"]; - - var spriteSheetTypes = ["json"]; - - for (var i=0; i < this.assetURLs.length; i++) - { - var filename = this.assetURLs[i]; - var fileType = filename.split('.').pop().toLowerCase(); - // what are we loading? - var type = null; - - for (var j=0; j < imageTypes.length; j++) - { - if(fileType == imageTypes[j]) - { - type = "img"; - break; - } - } - - if(type != "img") - { - for (var j=0; j < spriteSheetTypes.length; j++) - { - if(fileType == spriteSheetTypes[j]) - { - type = "atlas"; - break; - } - } - } - - if(type == "img") - { - - var texture = PIXI.Texture.fromImage(filename, this.crossorigin); - if(!texture.baseTexture.hasLoaded) - { - - var scope = this; - texture.baseTexture.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - this.assets.push(texture); - } - else - { - - // already loaded! - this.loadCount--; - // if this hits zero here.. then everything was cached! - if(this.loadCount == 0) - { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); - } - } - - } - else if(type == "atlas") - { - var spriteSheetLoader = new PIXI.SpriteSheetLoader(filename); - spriteSheetLoader.crossorigin = this.crossorigin; - this.assets.push(spriteSheetLoader); - - var scope = this; - spriteSheetLoader.addEventListener( 'loaded', function ( event ) - { - scope.onAssetLoaded(); - }); - - spriteSheetLoader.load(); - } - else - { - // dont know what the file is! :/ - //this.loadCount--; - throw new Error(filename + " is an unsupported file type " + this); - } - - //this.assets[i].load(); - }; -} + var scope = this; + this.loadCount = this.assetURLs.length; + + for (var i=0; i < this.assetURLs.length; i++) + { + var fileName = this.assetURLs[i]; + var fileType = fileName.split(".").pop().toLowerCase(); + + var loaderClass = this.loadersByType[fileType]; + if(!loaderClass) + throw new Error(fileType + " is an unsupported file type"); + + var loader = new loaderClass(fileName, this.crossorigin); + + loader.addEventListener("loaded", function() + { + scope.onAssetLoaded(); + }); + loader.load(); + } +}; + +/** + * Invoked after each file is loaded + * @private + */ PIXI.AssetLoader.prototype.onAssetLoaded = function() { - this.loadCount--; - this.dispatchEvent( { type: 'onProgress', content: this } ); - if(this.onProgress)this.onProgress(); + this.loadCount--; + this.dispatchEvent({type: "onProgress", content: this}); + if(this.onProgress) this.onProgress(); if(this.loadCount == 0) { - this.dispatchEvent( { type: 'onComplete', content: this } ); - if(this.onComplete)this.onComplete(); + this.dispatchEvent({type: "onComplete", content: this}); + if(this.onComplete) this.onComplete(); } -} +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The sprite sheet loader is used to load in JSON sprite sheet data + * To generate the data you can use http://www.codeandweb.com/texturepacker and publish the "JSON" format + * There is a free version so thats nice, although the paid version is great value for money. + * It is highly recommended to use Sprite sheets (also know as texture atlas") as it means sprite"s can be batched and drawn together for highly increased rendering speed. + * Once the data has been loaded the frames are stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * This loader will also load the image file that the Spritesheet points to as well as the data. + * When loaded this class will dispatch a "loaded" event + * @class SpriteSheetLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.SpriteSheetLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.frames = {}; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.SpriteSheetLoader.constructor = PIXI.SpriteSheetLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.SpriteSheetLoader.prototype.load = function() +{ + this.ajaxRequest = new AjaxRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onJSONLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/json"); + this.ajaxRequest.send(null) +}; + +/** + * Invoke when JSON file is loaded + * @private + */ +PIXI.SpriteSheetLoader.prototype.onJSONLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var jsonData = eval("(" + this.ajaxRequest.responseText + ")"); + var textureUrl = this.baseUrl + jsonData.meta.image; + + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + var scope = this; + image.addEventListener("loaded", function(event) { + scope.onLoaded(); + }); + + var frameData = jsonData.frames; + for (var i in frameData) + { + var rect = frameData[i].frame; + if (rect) + { + 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! + } + } + } + + image.load(); + } + } +}; +/** + * Invoke when all files are loaded (json and texture) + * @private + */ +PIXI.SpriteSheetLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The image loader class is responsible for loading images file formats ("jpeg", "jpg", "png" and "gif") + * Once the image has been loaded it is stored in the PIXI texture cache and can be accessed though PIXI.Texture.fromFrameId() and PIXI.Sprite.fromFromeId() + * When loaded this class will dispatch a 'loaded' event + * @class ImageLoader + * @extends EventTarget + * @constructor + * @param {String} url The url of the image + * @param {Boolean} crossorigin + */ +PIXI.ImageLoader = function(url, crossorigin) +{ + PIXI.EventTarget.call(this); + this.texture = PIXI.Texture.fromImage(url, crossorigin); +}; + +// constructor +PIXI.ImageLoader.constructor = PIXI.ImageLoader; + +/** + * Loads image or takes it from cache + */ +PIXI.ImageLoader.prototype.load = function() +{ + if(!this.texture.baseTexture.hasLoaded) + { + var scope = this; + this.texture.baseTexture.addEventListener("loaded", function() + { + scope.onLoaded(); + }); + } + else + { + this.onLoaded(); + } +}; + +/** + * Invoked when image file is loaded or it is already cached and ready to use + * @private + */ +PIXI.ImageLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + +/** + * The xml loader is used to load in XML bitmap font data ("xml" or "fnt") + * To generate the data you can use http://www.angelcode.com/products/bmfont/ + * This loader will also load the image file as the data. + * When loaded this class will dispatch a "loaded" event + * @class BitmapFontLoader + * @extends EventTarget + * @constructor + * @param {String} url the url of the sprite sheet JSON file + * @param {Boolean} crossorigin + */ + +PIXI.BitmapFontLoader = function(url, crossorigin) +{ + /* + * i use texture packer to load the assets.. + * http://www.codeandweb.com/texturepacker + * make sure to set the format as "JSON" + */ + PIXI.EventTarget.call(this); + this.url = url; + this.baseUrl = url.replace(/[^\/]*$/, ""); + this.texture = null; + this.crossorigin = crossorigin; +}; + +// constructor +PIXI.BitmapFontLoader.constructor = PIXI.BitmapFontLoader; + +/** + * This will begin loading the JSON file + */ +PIXI.BitmapFontLoader.prototype.load = function() +{ + this.ajaxRequest = new XMLHttpRequest(); + var scope = this; + this.ajaxRequest.onreadystatechange = function() + { + scope.onXMLLoaded(); + }; + + this.ajaxRequest.open("GET", this.url, true); + if (this.ajaxRequest.overrideMimeType) this.ajaxRequest.overrideMimeType("application/xml"); + this.ajaxRequest.send(null) +}; + +/** + * Invoked when XML file is loaded + * @private + */ +PIXI.BitmapFontLoader.prototype.onXMLLoaded = function() +{ + if (this.ajaxRequest.readyState == 4) + { + if (this.ajaxRequest.status == 200 || window.location.href.indexOf("http") == -1) + { + var textureUrl = this.baseUrl + this.ajaxRequest.responseXML.getElementsByTagName("page")[0].attributes.getNamedItem("file").nodeValue; + var image = new PIXI.ImageLoader(textureUrl, this.crossorigin); + this.texture = image.texture.baseTexture; + + var data = {}; + var info = this.ajaxRequest.responseXML.getElementsByTagName("info")[0]; + var common = this.ajaxRequest.responseXML.getElementsByTagName("common")[0]; + data.font = info.attributes.getNamedItem("face").nodeValue; + data.size = parseInt(info.attributes.getNamedItem("size").nodeValue, 10); + data.lineHeight = parseInt(common.attributes.getNamedItem("lineHeight").nodeValue, 10); + data.chars = {}; + + //parse letters + var letters = this.ajaxRequest.responseXML.getElementsByTagName("char"); + + for (var i = 0; i < letters.length; i++) + { + var charCode = parseInt(letters[i].attributes.getNamedItem("id").nodeValue, 10); + + var textureRect = { + x: parseInt(letters[i].attributes.getNamedItem("x").nodeValue, 10), + y: parseInt(letters[i].attributes.getNamedItem("y").nodeValue, 10), + width: parseInt(letters[i].attributes.getNamedItem("width").nodeValue, 10), + height: parseInt(letters[i].attributes.getNamedItem("height").nodeValue, 10) + }; + PIXI.TextureCache[charCode] = new PIXI.Texture(this.texture, textureRect); + + data.chars[charCode] = { + xOffset: parseInt(letters[i].attributes.getNamedItem("xoffset").nodeValue, 10), + yOffset: parseInt(letters[i].attributes.getNamedItem("yoffset").nodeValue, 10), + xAdvance: parseInt(letters[i].attributes.getNamedItem("xadvance").nodeValue, 10), + kerning: {} + }; + } + + //parse kernings + var kernings = this.ajaxRequest.responseXML.getElementsByTagName("kerning"); + for (i = 0; i < kernings.length; i++) + { + var first = parseInt(kernings[i].attributes.getNamedItem("first").nodeValue, 10); + var second = parseInt(kernings[i].attributes.getNamedItem("second").nodeValue, 10); + var amount = parseInt(kernings[i].attributes.getNamedItem("amount").nodeValue, 10); + + data.chars[second].kerning[first] = amount; + + } + PIXI.BitmapText.fonts[data.font] = data; + + var scope = this; + image.addEventListener("loaded", function() { + scope.onLoaded(); + }); + image.load(); + } + } +}; + +/** + * Invoked when all files are loaded (xml/fnt and texture) + * @private + */ +PIXI.BitmapFontLoader.prototype.onLoaded = function() +{ + this.dispatchEvent({type: "loaded", content: this}); +}; + +/** + * @author Mat Groves http://matgroves.com/ @Doormat23 + */ + + if (typeof exports !== 'undefined') { + if (typeof module !== 'undefined' && module.exports) { + exports = module.exports = PIXI; + } + exports.PIXI = PIXI; + } else { + root.PIXI = PIXI; + } + + +}).call(this); \ No newline at end of file diff --git a/src/pixi/text/BitmapText.js b/src/pixi/text/BitmapText.js index 5f1001d..6f5edf9 100644 --- a/src/pixi/text/BitmapText.js +++ b/src/pixi/text/BitmapText.js @@ -3,23 +3,22 @@ */ /** - * A Text Object will create a line(s) of text using bitmap font - * @class DisplayObjectContainer - * @extends Sprite + * A Text Object will create a line(s) of text using bitmap font + * You can generate the fnt files using + * http://www.angelcode.com/products/bmfont/ for windows of + * http://www.bmglyph.com/ for mac. + * @class BitmapText + * @extends DisplayObjectContainer * @constructor * @param {String} text The copy that you would like the text to display * @param {Object} [style] The style parameters - * @param {Object} [style.font="bold 20pt Arial"] The style and size of the font - * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" + * @param {String} [style.font] default is "20pt Arial" The size and bitmap font id (must have loaded previously) * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") - * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" - * @param {Number} [style.strokeThickness=0] A number that represents the thickness of the stroke. Default is 0 (no stroke) */ + //* @param {Object} [style.font="bold 20pt Arial"] The style and size of the font PIXI.BitmapText = function(text, style) { - this.canvas = document.createElement("canvas"); - this.context = this.canvas.getContext("2d"); - PIXI.DisplayObjectContainer.call(this, PIXI.Texture.fromCanvas(this.canvas)); + PIXI.DisplayObjectContainer.call(this); this.setText(text); this.setStyle(style); @@ -91,6 +90,7 @@ prevCharCode = null; continue; } + var charData = data.chars[charCode]; if(!charData) continue; diff --git a/src/pixi/text/Text.js b/src/pixi/text/Text.js index c3ca170..ea8a27b 100644 --- a/src/pixi/text/Text.js +++ b/src/pixi/text/Text.js @@ -3,13 +3,13 @@ */ /** - * A Text Object will create a line(s) of text + * A Text Object will create a line(s) of text to split a line you can use "\n" * @class Text * @extends Sprite * @constructor * @param {String} text The copy that you would like the text to display * @param {Object} [style] The style parameters - * @param {Object} [style.font="bold 20pt Arial"] The style and size of the font + * @param {String} [style.font] default "bold 20pt Arial" The style and size of the font * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" @@ -35,7 +35,7 @@ * Set the style of the text * @method setStyle * @param {Object} [style] The style parameters - * @param {Object} [style.font="bold 20pt Arial"] The style and size of the font + * @param {String} [style.font="bold 20pt Arial"] The style and size of the font * @param {Object} [style.fill="black"] A canvas fillstyle that will be used on the text eg "red", "#00FF00" * @param {String} [style.align="left"] An alignment of the multiline text ("left", "center" or "right") * @param {String} [style.stroke] A canvas fillstyle that will be used on the text stroke eg "blue", "#FCFF00" @@ -49,12 +49,11 @@ style.align = style.align || "left"; style.strokeThickness = style.strokeThickness || 0; this.style = style; - this.dirty = true; }; /** - * Set the copy for the text object + * Set the copy for the text object. To split a line you can use "\n" * @methos setText * @param {String} text The copy that you would like the text to display */ @@ -103,6 +102,7 @@ for (i = 0; i < lines.length; i++) { var linePosition = new PIXI.Point(this.style.strokeThickness / 2, this.style.strokeThickness / 2 + i * lineHeight); + if(this.style.align == "right") { linePosition.x += maxLineWidth - lineWidths[i]; @@ -122,6 +122,7 @@ this.context.fillText(lines[i], linePosition.x, linePosition.y); } } + this.updateTexture(); };